@kitconcept/volto-light-theme 8.0.0-alpha.2 → 8.0.0-alpha.21

package/src/components/Widgets/ColorSwatch.stories.tsx

@@ -0,0 +1,197 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Wrapper from '@plone/volto/storybook';
+import type { StyleDefinition } from '@plone/types';
+
+import ColorSwatch, { type ColorSwatchProps } from './ColorSwatch';
+
+const palettes: StyleDefinition[] = [
+  {
+    name: 'default',
+    label: 'Default',
+    style: {
+      '--theme-color': '#ffffff',
+      '--theme-foreground-color': '#1b1c1d',
+      '--theme-low-contrast-foreground-color': '#585858',
+    },
+  },
+  {
+    name: 'warm',
+    label: 'Warm',
+    style: {
+      '--theme-color': '#fff5ed',
+      '--theme-foreground-color': '#6b2c1f',
+      '--theme-low-contrast-foreground-color': '#b06a54',
+    },
+  },
+  {
+    name: 'unstyled',
+    label: 'No Inline Style',
+    style: undefined,
+  },
+];
+
+const themePalettes: StyleDefinition[] = [
+  {
+    name: 'ocean',
+    label: 'Ocean',
+    style: {
+      '--theme-color': '#dff5ff',
+      '--theme-foreground-color': '#003d5b',
+      '--theme-low-contrast-foreground-color': '#5c6b73',
+    },
+  },
+  {
+    name: 'forest',
+    label: 'Forest',
+    style: {
+      '--theme-color': '#e6f4ea',
+      '--theme-foreground-color': '#1e4d2b',
+      '--theme-low-contrast-foreground-color': '#4b7754',
+    },
+  },
+];
+
+const palettesWithoutDefault: StyleDefinition[] = [
+  {
+    name: 'primary',
+    label: 'Primary',
+    style: {
+      '--theme-color': '#333333',
+      '--theme-foreground-color': '#f2f2f2',
+      '--theme-low-contrast-foreground-color': '#d9d9d9',
+    },
+  },
+  {
+    name: 'secondary',
+    label: 'Secondary',
+    style: {
+      '--theme-color': '#666666',
+      '--theme-foreground-color': '#ffffff',
+      '--theme-low-contrast-foreground-color': '#f0f0f0',
+    },
+  },
+];
+
+const meta = {
+  title: 'Widgets/ColorSwatch',
+  component: ColorSwatch,
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <div style={{ width: 320 }}>
+          <Story />
+        </div>
+      </Wrapper>
+    ),
+  ],
+  tags: ['autodocs'],
+} satisfies Meta<typeof ColorSwatch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const resolveSelectedColorName = (
+  args: ColorSwatchProps,
+  value: string | undefined,
+) => {
+  const colors = args.themes || args.colors || [];
+  const selectedColorName = colors.find(({ name }) => name === value)?.name;
+  const defaultSelectedColorName =
+    !selectedColorName && typeof args.default === 'string'
+      ? colors.find(({ name }) => name === args.default)?.name
+      : undefined;
+
+  if (selectedColorName || defaultSelectedColorName) {
+    return selectedColorName ?? defaultSelectedColorName;
+  }
+
+  return colors.find(({ name }) => name === 'default')?.name ?? colors[0]?.name;
+};
+
+const InteractiveColorSwatch = (args: ColorSwatchProps) => {
+  const [value, setValue] = React.useState(args.value);
+  const selectedValue = resolveSelectedColorName(args, value);
+
+  return (
+    <>
+      <ColorSwatch
+        {...args}
+        value={value}
+        onChange={(id, selectedValue) => {
+          setValue(selectedValue);
+          args.onChange?.(id, selectedValue);
+        }}
+      />
+      <div style={{ marginTop: '10px' }}>
+        The selected value is: <strong>{selectedValue || 'none'}</strong>
+      </div>
+    </>
+  );
+};
+
+export const NoPalettes: Story = {
+  render: (args) => <InteractiveColorSwatch {...args} />,
+  args: {
+    id: 'color',
+    label: 'Theme',
+    title: 'Theme',
+    themes: [],
+  },
+};
+
+export const DefaultPalette: Story = {
+  render: (args) => <InteractiveColorSwatch {...args} />,
+  args: {
+    id: 'color',
+    label: 'Color palette',
+    title: 'Color palette',
+    value: 'default',
+    colors: palettes,
+  },
+};
+
+export const ThemePalette: Story = {
+  render: (args) => <InteractiveColorSwatch {...args} />,
+  args: {
+    id: 'theme',
+    label: 'Theme palette',
+    title: 'Theme palette',
+    value: 'ocean',
+    themes: themePalettes,
+  },
+};
+
+export const ColorPaletteWithDefault: Story = {
+  render: (args) => <InteractiveColorSwatch {...args} />,
+  args: {
+    id: 'color',
+    label: 'Color palette',
+    title: 'Color palette',
+    colors: palettes,
+    default: 'warm',
+  },
+};
+
+export const ColorPaletteNoValueNoDefault: Story = {
+  render: (args) => <InteractiveColorSwatch {...args} />,
+  args: {
+    id: 'color',
+    label: 'Color palette',
+    title: 'Color palette',
+    colors: palettes,
+  },
+};
+
+export const ColorPaletteNoValueNoDefaultWithFallbackToFirst: Story = {
+  render: (args) => <InteractiveColorSwatch {...args} />,
+  args: {
+    id: 'color',
+    label: 'Color palette',
+    title: 'Color palette',
+    colors: palettesWithoutDefault,
+  },
+};

package/src/components/Widgets/ColorSwatch.test.tsx

@@ -0,0 +1,188 @@
+import React, { createContext, useContext } from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/react';
+import ColorSwatch from './ColorSwatch';
+import type { StyleDefinition } from '@plone/types';
+
+vi.mock('@plone/volto/components/manage/Widgets/FormFieldWrapper', () => ({
+  __esModule: true,
+  default: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="form-field-wrapper">{children}</div>
+  ),
+}));
+
+const MockRadioGroupContext = createContext<
+  ((value: string) => void) | undefined
+>(undefined);
+
+vi.mock('@plone/components', () => ({
+  RadioGroup: ({
+    children,
+    onChange,
+    ...rest
+  }: {
+    children: React.ReactNode;
+    onChange?: (value: string) => void;
+  }) => {
+    const { isDisabled: _isDisabled, ...passThrough } = rest as Record<
+      string,
+      unknown
+    >;
+
+    return (
+      <MockRadioGroupContext.Provider value={onChange}>
+        <div role="radiogroup" {...passThrough}>
+          {React.Children.map(children, (child) =>
+            React.isValidElement(child)
+              ? React.cloneElement(child, {
+                  onSelect: onChange,
+                })
+              : child,
+          )}
+        </div>
+      </MockRadioGroupContext.Provider>
+    );
+  },
+  Radio: ({
+    value,
+    onSelect,
+    className,
+    children,
+    ...rest
+  }: {
+    value: string;
+    onSelect?: (value: string) => void;
+    className?: string;
+    children?: React.ReactNode;
+  }) => {
+    const groupOnChange = useContext(MockRadioGroupContext);
+    return (
+      <button
+        type="button"
+        className={className}
+        data-value={value}
+        onClick={() => {
+          groupOnChange?.(value);
+          onSelect?.(value);
+        }}
+        {...rest}
+      >
+        {children}
+      </button>
+    );
+  },
+  Tooltip: ({ children }: { children: React.ReactNode }) => (
+    <span data-testid="tooltip">{children}</span>
+  ),
+}));
+
+vi.mock('react-aria-components', () => ({
+  Focusable: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  TooltipTrigger: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+}));
+
+const palette: StyleDefinition[] = [
+  {
+    name: 'default',
+    label: 'Default',
+    style: { '--theme-color': '#fff' },
+  },
+  {
+    name: 'ocean',
+    label: 'Ocean',
+    style: { '--theme-color': '#00a0e6' },
+  },
+  {
+    name: 'sunset',
+    label: 'Sunset',
+    style: { '--theme-color': '#ff6b00' },
+  },
+];
+
+const renderColorSwatch = (
+  props: Partial<React.ComponentProps<typeof ColorSwatch>> = {},
+) => {
+  const { colors = palette, themes, onChange = vi.fn(), ...rest } = props;
+
+  const componentProps: React.ComponentProps<typeof ColorSwatch> = {
+    id: 'theme',
+    label: 'Theme',
+    title: 'Theme',
+    colors,
+    onChange,
+    ...rest,
+  } as React.ComponentProps<typeof ColorSwatch>;
+
+  if (themes !== undefined) {
+    componentProps.themes = themes;
+  }
+
+  return render(<ColorSwatch {...componentProps} />);
+};
+
+const getActiveClassName = (container: HTMLElement | Document) =>
+  container.querySelector('.color-swatch-option-handler.active')?.className ??
+  '';
+
+describe('ColorSwatch', () => {
+  it('renders nothing when no palettes are provided', () => {
+    const { container } = renderColorSwatch({ themes: [] });
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('highlights the provided value', () => {
+    const { container } = renderColorSwatch({ value: 'ocean' });
+    expect(getActiveClassName(container)).toContain('ocean');
+  });
+
+  it('highlights the default value when no current value exists', () => {
+    const { container } = renderColorSwatch({
+      value: undefined,
+      default: 'sunset',
+    });
+    expect(getActiveClassName(container)).toContain('sunset');
+  });
+
+  it('falls back to the "default" palette name when no value or default is provided', () => {
+    const { container } = renderColorSwatch({
+      value: undefined,
+      default: undefined,
+    });
+    expect(getActiveClassName(container)).toContain('default');
+  });
+
+  it('falls back to the first color when no "default" palette is present', () => {
+    const colorsWithoutDefault: StyleDefinition[] = [
+      {
+        name: 'primary',
+        label: 'Primary',
+        style: { '--theme-color': '#333' },
+      },
+      {
+        name: 'secondary',
+        label: 'Secondary',
+        style: { '--theme-color': '#666' },
+      },
+    ];
+
+    const { container } = renderColorSwatch({
+      colors: colorsWithoutDefault,
+      value: undefined,
+      default: undefined,
+    });
+
+    expect(getActiveClassName(container)).toContain('primary');
+  });
+
+  it('notifies when a different swatch is chosen', () => {
+    const handleChange = vi.fn();
+    const { container } = renderColorSwatch({ onChange: handleChange });
+    const buttons = container.querySelectorAll('.color-swatch-option-wrapper');
+
+    fireEvent.click(buttons[2]);
+
+    expect(handleChange).toHaveBeenCalledWith('theme', 'sunset');
+  });
+});

package/src/components/Widgets/ColorSwatch.tsx

@@ -1,58 +1,96 @@
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
-import { Button } from '@plone/components';
+import { Radio, RadioGroup, Tooltip } from '@plone/components';
 import cx from 'classnames';
+import { Focusable, TooltipTrigger } from 'react-aria-components';
+import type { StyleDefinition } from '@plone/types';
 
-export type Color =
-  | {
-      name: string;
-      label: string;
-      style: Record<`--${string}`, string>;
-    }
-  | {
-      name: string;
-      label: string;
-      style: undefined;
-    };
-
-export type ColorSwatchProps = {
+type BaseColorSwatchProps = {
   id: string;
   title: string;
+  label: string;
   value?: string;
-  default?: string | object;
+  default?: string;
   required?: boolean;
-  missing_value?: unknown;
   className?: string;
   onChange: (id: string, value: any) => void;
-  colors: Color[];
-  themes: Color[];
+  disabled?: boolean;
+  isDisabled?: boolean;
 };
 
+type ColorsOnly = { colors: StyleDefinition[]; themes?: undefined };
+type ThemesOnly = { themes: StyleDefinition[]; colors?: undefined };
+
+export type ColorSwatchProps = BaseColorSwatchProps & (ColorsOnly | ThemesOnly);
+
 const ColorSwatch = (props: ColorSwatchProps) => {
-  const { id, value, onChange } = props;
+  const {
+    id,
+    label,
+    title,
+    value,
+    onChange,
+    disabled,
+    isDisabled,
+    default: defaultValue,
+  } = props;
   const colors = props.themes || props.colors || [];
 
+  const selectedColorName = colors.find(({ name }) => name === value)?.name;
+  const defaultSelectedColorName =
+    !selectedColorName && typeof defaultValue === 'string'
+      ? colors.find(({ name }) => name === defaultValue)?.name
+      : undefined;
+
+  const fallbackColorName =
+    !selectedColorName && !defaultSelectedColorName
+      ? colors.find(({ name }) => name === 'default')?.name || colors[0]?.name
+      : undefined;
+
+  const radioGroupValueProps: {
+    value?: string;
+    defaultValue?: string;
+  } = selectedColorName
+    ? { value: selectedColorName }
+    : defaultSelectedColorName
+      ? { defaultValue: defaultSelectedColorName }
+      : fallbackColorName
+        ? { defaultValue: fallbackColorName }
+        : {};
+
+  const currentColorName =
+    selectedColorName ?? defaultSelectedColorName ?? fallbackColorName;
+
   return colors.length > 0 ? (
     <FormFieldWrapper {...props} className="color-swatch-widget">
-      <div className="buttons">
-        {colors.map((color) => {
-          const colorName = color.name;
-          return (
-            <Button
-              key={id + colorName}
-              className={cx(colorName, { active: value === colorName })}
-              onPress={(e) => {
-                onChange(
-                  id,
-                  colorName === value ? props.missing_value : colorName,
-                );
-              }}
-              value={value}
-              style={color.style}
-              aria-label={color.label}
-            />
-          );
-        })}
-      </div>
+      <RadioGroup
+        aria-label={title || label || id}
+        orientation="horizontal"
+        {...radioGroupValueProps}
+        onChange={(value) => onChange(id, value)}
+        isDisabled={disabled || isDisabled}
+      >
+        {colors.map((color) => (
+          <Radio
+            aria-label={color.label}
+            value={color.name}
+            className="color-swatch-option-wrapper"
+            key={color.name}
+          >
+            <TooltipTrigger delay={120} closeDelay={80} trigger="hover">
+              <Focusable>
+                <div
+                  role="img"
+                  className={cx('color-swatch-option-handler', color.name, {
+                    active: currentColorName === color.name,
+                  })}
+                  style={color.style}
+                ></div>
+              </Focusable>
+              <Tooltip>{color.label}</Tooltip>
+            </TooltipTrigger>
+          </Radio>
+        ))}
+      </RadioGroup>
     </FormFieldWrapper>
   ) : null;
 };

package/src/components/Widgets/SoftTextWidget.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Input, Label } from 'semantic-ui-react';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+
+const SoftTextWidget = (props) => {
+  const {
+    id,
+    value,
+    onChange,
+    onBlur,
+    onClick,
+    icon,
+    iconAction,
+    minLength,
+    maxLength,
+    softMaxLength,
+    placeholder,
+    isDisabled,
+    focus,
+  } = props;
+  const ref = useRef();
+  const [softLengthWarning, setSoftLengthWarning] = useState('');
+  useEffect(() => {
+    if (focus) {
+      ref.current.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  // START CUSTOMIZATION
+  const handleChange = (id, newValue) => {
+    if (softMaxLength && newValue?.length) {
+      const remaining = softMaxLength - newValue.length;
+      if (remaining < 0) {
+        setSoftLengthWarning(
+          `You have exceeded the recommended limit by ${Math.abs(remaining)}`,
+        );
+      } else {
+        setSoftLengthWarning('');
+      }
+    }
+    onChange(id, newValue);
+  };
+  // END CUSTOMIZATION
+  return (
+    <FormFieldWrapper {...props} className="text">
+      <Input
+        id={`field-${id}`}
+        name={id}
+        value={value || ''}
+        disabled={isDisabled}
+        icon={icon || null}
+        placeholder={placeholder}
+        // START CUSTOMIZATION
+        onChange={({ target }) =>
+          handleChange(id, target.value === '' ? undefined : target.value)
+        }
+        // END CUSTOMIZATION
+        ref={ref}
+        onBlur={({ target }) =>
+          onBlur(id, target.value === '' ? undefined : target.value)
+        }
+        onClick={() => onClick()}
+        minLength={minLength || null}
+        maxLength={maxLength || null}
+      />
+      {/* START CUSTOMIZATION */}
+      {softLengthWarning.length > 0 && (
+        <Label key={softLengthWarning} basic color="yellow" pointing>
+          {softLengthWarning}
+        </Label>
+      )}
+      {/* END CUSTOMIZATION */}
+      {icon && iconAction && (
+        <button className={`field-${id}-action-button`} onClick={iconAction}>
+          <Icon name={icon} size="18px" />
+        </button>
+      )}
+    </FormFieldWrapper>
+  );
+};
+export default SoftTextWidget;
+SoftTextWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.string,
+  focus: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onClick: PropTypes.func,
+  onEdit: PropTypes.func,
+  onDelete: PropTypes.func,
+  icon: PropTypes.shape({
+    xmlns: PropTypes.string,
+    viewBox: PropTypes.string,
+    content: PropTypes.string,
+  }),
+  iconAction: PropTypes.func,
+  minLength: PropTypes.number,
+  maxLength: PropTypes.number,
+  // START CUSTOMIZATION
+  softMaxLength: PropTypes.number,
+  // END CUSTOMIZATION
+  wrapped: PropTypes.bool,
+  placeholder: PropTypes.string,
+};
+SoftTextWidget.defaultProps = {
+  description: null,
+  required: false,
+  error: [],
+  value: null,
+  onChange: () => {},
+  onBlur: () => {},
+  onClick: () => {},
+  onEdit: null,
+  onDelete: null,
+  focus: false,
+  icon: null,
+  iconAction: null,
+  minLength: null,
+  maxLength: null,
+  // START CUSTOMIZATION
+  softMaxLength: null,
+  // END CUSTOMIZATION
+};