@kitconcept/volto-light-theme 8.0.0-alpha.3 → 8.0.0-alpha.30

package/src/components/Widgets/AlignWidget.tsx

@@ -1,84 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import ButtonsWidget, {
-  type ActionInfo,
-  type ButtonsWidgetProps,
-} from './Buttons';
-import imageLeftSVG from '@plone/volto/icons/image-left.svg';
-import imageRightSVG from '@plone/volto/icons/image-right.svg';
-import imageFitSVG from '@plone/volto/icons/image-fit.svg';
-import imageNarrowSVG from '@plone/volto/icons/image-narrow.svg';
-import imageWideSVG from '@plone/volto/icons/image-wide.svg';
-import imageFullSVG from '@plone/volto/icons/image-full.svg';
-import type { IntlShape } from 'react-intl';
-
-const messages = defineMessages({
-  left: {
-    id: 'Left',
-    defaultMessage: 'Left',
-  },
-  right: {
-    id: 'Right',
-    defaultMessage: 'Right',
-  },
-  center: {
-    id: 'Center',
-    defaultMessage: 'Center',
-  },
-  narrow: {
-    id: 'Narrow',
-    defaultMessage: 'Narrow',
-  },
-  wide: {
-    id: 'Wide',
-    defaultMessage: 'Wide',
-  },
-  full: {
-    id: 'Full',
-    defaultMessage: 'Full',
-  },
-});
-
-export const defaultActionsInfo = ({
-  intl,
-}: {
-  intl: IntlShape;
-}): Record<string, ActionInfo> => ({
-  left: [imageLeftSVG, intl.formatMessage(messages.left)],
-  center: [imageFitSVG, intl.formatMessage(messages.center)],
-  right: [imageRightSVG, intl.formatMessage(messages.right)],
-  narrow: [imageNarrowSVG, intl.formatMessage(messages.narrow)],
-  wide: [imageWideSVG, intl.formatMessage(messages.wide)],
-  full: [imageFullSVG, intl.formatMessage(messages.full)],
-});
-
-type AlignWidgetProps = ButtonsWidgetProps & {
-  defaultAction?: string;
-};
-
-const AlignWidget = (props: AlignWidgetProps) => {
-  const intl = useIntl();
-
-  const {
-    actions = ['left', 'center', 'right', 'full'],
-    actionsInfoMap,
-    default: defaultValue,
-    defaultAction,
-  } = props;
-
-  const actionsInfo = {
-    ...defaultActionsInfo({ intl }),
-    ...actionsInfoMap,
-  };
-
-  return (
-    <ButtonsWidget
-      {...props}
-      actions={actions}
-      actionsInfoMap={actionsInfo}
-      default={defaultValue ?? defaultAction ?? 'center'}
-    />
-  );
-};
-
-export default AlignWidget;

package/src/components/Widgets/BlockAlignment.tsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import ButtonsWidget, {
-  type ActionInfo,
-  type ButtonsWidgetProps,
-} from './Buttons';
-import imageFitSVG from '@plone/volto/icons/image-fit.svg';
-import imageLeftSVG from '@plone/volto/icons/image-left.svg';
-import imageRightSVG from '@plone/volto/icons/image-right.svg';
-import type { IntlShape } from 'react-intl';
-import type { StyleDefinition } from '@plone/types';
-
-const messages = defineMessages({
-  left: {
-    id: 'Left',
-    defaultMessage: 'Left',
-  },
-  right: {
-    id: 'Right',
-    defaultMessage: 'Right',
-  },
-  center: {
-    id: 'Center',
-    defaultMessage: 'Center',
-  },
-});
-
-export const defaultActionsInfo = ({
-  intl,
-}: {
-  intl: IntlShape;
-}): Record<string, ActionInfo> => ({
-  left: [imageLeftSVG, intl.formatMessage(messages.left)],
-  right: [imageRightSVG, intl.formatMessage(messages.right)],
-  center: [imageFitSVG, intl.formatMessage(messages.center)],
-});
-
-const DEFAULT_ACTIONS: StyleDefinition[] = [
-  {
-    style: {
-      '--block-alignment': 'var(--align-left)',
-    },
-    name: 'left',
-    label: 'Left',
-  },
-  {
-    style: {
-      '--block-alignment': 'var(--align-center)',
-    },
-    name: 'center',
-    label: 'Center',
-  },
-  {
-    style: {
-      '--block-alignment': 'var(--align-right)',
-    },
-    name: 'right',
-    label: 'Right',
-  },
-];
-
-const BlockAlignmentWidget = (props: ButtonsWidgetProps) => {
-  const intl = useIntl();
-
-  const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
-  const filteredActions =
-    filterActions && filterActions.length > 0
-      ? actions.filter((action) => {
-          const actionName = typeof action === 'string' ? action : action.name;
-          return filterActions.includes(actionName);
-        })
-      : actions;
-
-  const actionsInfo = {
-    ...defaultActionsInfo({ intl }),
-    ...actionsInfoMap,
-  };
-
-  return (
-    <ButtonsWidget
-      {...props}
-      actions={filteredActions}
-      actionsInfoMap={actionsInfo}
-    />
-  );
-};
-
-export default BlockAlignmentWidget;

package/src/components/Widgets/BlockWidth.tsx

@@ -1,101 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import type { IntlShape } from 'react-intl';
-import ButtonsWidget, {
-  type ActionInfo,
-  type ButtonsWidgetProps,
-} from './Buttons';
-import imageFitSVG from '@plone/volto/icons/image-fit.svg';
-import imageNarrowSVG from '@plone/volto/icons/image-narrow.svg';
-import imageWideSVG from '@plone/volto/icons/image-wide.svg';
-import imageFullSVG from '@plone/volto/icons/image-full.svg';
-import type { StyleDefinition } from '@plone/types';
-
-const messages = defineMessages({
-  narrow: {
-    id: 'Narrow',
-    defaultMessage: 'Narrow',
-  },
-  default: {
-    id: 'Default',
-    defaultMessage: 'Default',
-  },
-  layout: {
-    id: 'Layout',
-    defaultMessage: 'Layout',
-  },
-  full: {
-    id: 'Full',
-    defaultMessage: 'Full',
-  },
-});
-
-export const defaultActionsInfo = ({
-  intl,
-}: {
-  intl: IntlShape;
-}): Record<string, ActionInfo> => ({
-  narrow: [imageNarrowSVG, intl.formatMessage(messages.narrow)],
-  default: [imageFitSVG, intl.formatMessage(messages.default)],
-  layout: [imageWideSVG, intl.formatMessage(messages.layout)],
-  full: [imageFullSVG, intl.formatMessage(messages.full)],
-});
-
-const DEFAULT_ACTIONS: StyleDefinition[] = [
-  {
-    style: {
-      '--block-width': 'var(--narrow-container-width)',
-    },
-    name: 'narrow',
-    label: 'Narrow',
-  },
-  {
-    style: {
-      '--block-width': 'var(--default-container-width)',
-    },
-    name: 'default',
-    label: 'Default',
-  },
-  {
-    style: {
-      '--block-width': 'var(--layout-container-width)',
-    },
-    name: 'layout',
-    label: 'Layout',
-  },
-  {
-    style: {
-      '--block-width': 'unset',
-    },
-    name: 'full',
-    label: 'Full',
-  },
-];
-
-const BlockWidthWidget = (props: ButtonsWidgetProps) => {
-  const intl = useIntl();
-
-  const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
-  const filteredActions =
-    filterActions && filterActions.length > 0
-      ? actions.filter((action) => {
-          const actionName = typeof action === 'string' ? action : action.name;
-          return filterActions.includes(actionName);
-        })
-      : actions;
-
-  const actionsInfo = {
-    ...defaultActionsInfo({ intl }),
-    ...actionsInfoMap,
-  };
-
-  return (
-    <ButtonsWidget
-      {...props}
-      actions={filteredActions}
-      actionsInfoMap={actionsInfo}
-    />
-  );
-};
-
-export default BlockWidthWidget;

package/src/components/Widgets/Buttons.tsx

@@ -1,167 +0,0 @@
-import React from 'react';
-import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
-import Icon from '@plone/volto/components/theme/Icon/Icon';
-import { RadioGroup } from '@plone/components';
-import { Radio } from 'react-aria-components';
-import isEqual from 'lodash/isEqual';
-import type { StyleDefinition } from '@plone/types';
-
-/**
- * A tuple that has an icon in the first element and a i18n string in the second.
- */
-export type ActionInfo = [React.ReactElement<any>, string] | [string, string];
-
-type ActionValue = string | Record<`--${string}`, string>;
-
-export type ButtonsWidgetProps = {
-  /**
-   * Unique identifier for the widget.
-   */
-  id: string;
-
-  /**
-   * Callback function to handle changes.
-   */
-  onChange: (id: string, value: ActionValue) => void;
-
-  /**
-   * List of actions available for the widget.
-   */
-  actions?: Array<StyleDefinition | string>;
-
-  /**
-   * Map containing additional the information (icon and i18n string) for each action.
-   */
-  actionsInfoMap?: Record<string, ActionInfo>;
-
-  /**
-   * List of actions to be filtered out. In case that we don't want the default ones
-   * we can filter them out.
-   */
-  filterActions?: string[];
-
-  /**
-   * Current value of the widget.
-   */
-  value?: ActionValue;
-
-  /**
-   * Default value of the widget.
-   */
-  default?: ActionValue;
-
-  /**
-   * Indicates if the widget is disabled.
-   */
-  disabled?: boolean;
-
-  /**
-   * Indicates if the widget is disabled (alternative flag for compatibility reasons).
-   */
-  isDisabled?: boolean;
-  [key: string]: any;
-};
-
-type NormalizedAction = {
-  name: string;
-  value: ActionValue;
-};
-
-const ButtonsWidget = (props: ButtonsWidgetProps) => {
-  const {
-    disabled,
-    id,
-    onChange,
-    actions = [],
-    actionsInfoMap,
-    value,
-    isDisabled,
-    default: defaultValue,
-  } = props;
-  const normalizedActions = React.useMemo<NormalizedAction[]>(
-    () =>
-      actions.map((action) =>
-        typeof action === 'string'
-          ? { name: action, value: action }
-          : {
-              name: action.name,
-              value: action.style ?? action.name,
-            },
-      ),
-    [actions],
-  );
-
-  const selectedActionName = React.useMemo(
-    () =>
-      normalizedActions.find((action) => isEqual(value, action.value))?.name,
-    [normalizedActions, value],
-  );
-
-  const handleChange = React.useCallback(
-    (selectedName: string) => {
-      const selectedAction = normalizedActions.find(
-        ({ name }) => name === selectedName,
-      );
-
-      if (selectedAction) {
-        onChange(id, selectedAction.value);
-      }
-    },
-    [id, normalizedActions, onChange],
-  );
-
-  React.useEffect(() => {
-    if (!value && defaultValue) {
-      const nextValue =
-        typeof defaultValue === 'string'
-          ? normalizedActions.find(({ name }) => name === defaultValue)
-              ?.value ?? defaultValue
-          : defaultValue;
-
-      onChange(id, nextValue);
-    }
-  }, [defaultValue, id, normalizedActions, onChange, value]);
-
-  return (
-    <FormFieldWrapper {...props} className="widget">
-      <RadioGroup
-        aria-label={props.title || props.label || id}
-        orientation="horizontal"
-        value={selectedActionName}
-        onChange={handleChange}
-        isDisabled={disabled || isDisabled}
-        className="buttons buttons-widget"
-      >
-        {normalizedActions.map((action) => {
-          const actionInfo = actionsInfoMap?.[action.name];
-          const [iconOrText, ariaLabel] = actionInfo ?? [
-            action.name,
-            action.name,
-          ];
-
-          return (
-            <Radio
-              key={action.name}
-              aria-label={ariaLabel}
-              value={action.name}
-              className="buttons-widget-option"
-            >
-              {typeof iconOrText === 'string' ? (
-                <div className="image-sizes-text">{iconOrText}</div>
-              ) : (
-                <Icon
-                  name={iconOrText}
-                  title={ariaLabel || action.name}
-                  size="24px"
-                  ariaHidden={true}
-                />
-              )}
-            </Radio>
-          );
-        })}
-      </RadioGroup>
-    </FormFieldWrapper>
-  );
-};
-
-export default ButtonsWidget;

package/src/components/Widgets/Size.tsx

@@ -1,78 +0,0 @@
-import { defineMessages, useIntl } from 'react-intl';
-import ButtonsWidget, {
-  type ActionInfo,
-  type ButtonsWidgetProps,
-} from './Buttons';
-import type { IntlShape } from 'react-intl';
-import type { StyleDefinition } from '@plone/types';
-
-const messages = defineMessages({
-  s: {
-    id: 'Small',
-    defaultMessage: 'Small',
-  },
-  m: {
-    id: 'Medium',
-    defaultMessage: 'Medium',
-  },
-  l: {
-    id: 'Large',
-    defaultMessage: 'Large',
-  },
-});
-
-export const defaultActionsInfo = ({
-  intl,
-}: {
-  intl: IntlShape;
-}): Record<string, ActionInfo> => ({
-  s: ['S', intl.formatMessage(messages.s)],
-  m: ['M', intl.formatMessage(messages.m)],
-  l: ['L', intl.formatMessage(messages.l)],
-});
-
-const DEFAULT_ACTIONS: StyleDefinition[] = [
-  {
-    name: 's',
-    label: 'Small',
-    style: undefined,
-  },
-  {
-    name: 'm',
-    label: 'Medium',
-    style: undefined,
-  },
-  {
-    name: 'l',
-    label: 'Large',
-    style: undefined,
-  },
-];
-
-const SizeWidget = (props: ButtonsWidgetProps) => {
-  const intl = useIntl();
-
-  const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
-  const filteredActions =
-    filterActions && filterActions.length > 0
-      ? actions.filter((action) => {
-          const actionName = typeof action === 'string' ? action : action.name;
-          return filterActions.includes(actionName);
-        })
-      : actions;
-
-  const actionsInfo = {
-    ...defaultActionsInfo({ intl }),
-    ...actionsInfoMap,
-  };
-
-  return (
-    <ButtonsWidget
-      {...props}
-      actions={filteredActions}
-      actionsInfoMap={actionsInfo}
-    />
-  );
-};
-
-export default SizeWidget;