@wix/patterns-fields 1.17.0 → 1.18.0

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/header-dropdown.tsx

@@ -1,16 +1,16 @@
 import React, { useCallback } from 'react';
 
-import type { DropdownLayoutValueOption } from '@wix/design-system';
 import {
   Box,
-  Text,
-  Heading,
   DropdownBase,
+  DropdownLayoutValueOption,
+  Heading,
+  Text,
+  TextButton,
   ToggleButton,
 } from '@wix/design-system';
 
 import { useTranslations } from '../../../../../hooks';
-import { LinkButton } from '../../../components/link';
 import { combineClasses } from '../utils/stylable-helper';
 
 import HeaderOneIcon from './icons/rt-header-one.svg';
@@ -23,7 +23,7 @@ import ParagraphOneIcon from './icons/rt-paragraph-one.svg';
 import NormalTextIcon from './icons/rt-normal-text.svg';
 import ParagraphThreeIcon from './icons/rt-paragraph-three.svg';
 import { richTextToolbarDataHook } from '../../data-hooks';
-import { style, classes } from './toolbar.st.css.js';
+import { classes, style } from './toolbar.st.css.js';
 
 import { preventEvent } from '../../../../../utils';
 import type { TextKeys } from '../../../types';
@@ -78,133 +78,155 @@ const HeaderDropdownHelpSection: React.FC = () => {
       <Text size="small">
         {t('CMS.richTextEditor.toolbar.headerDropdown.help.text')}
         <br />
-        <LinkButton
-          inText
-          href={t('CMS.richTextEditor.toolbar.headerDropdown.button.info.link')}
+        <TextButton
+          as="a"
+          href="https://support.wix.com/en/article/formatting-rich-text-elements-in-the-dashboards-data-manager"
+          target="_blank"
+          rel="noopener noreferrer"
+          size="small"
+          underline="always"
         >
           {t('CMS.richTextEditor.toolbar.headerDropdown.button.info')}
-        </LinkButton>
+        </TextButton>
       </Text>
     </Box>
   );
 };
 
-const createDropdownOptions = (): DropdownLayoutValueOption[] => [
-  {
-    id: 'header-one',
-    value: (props) => (
-      <HeaderDropdownItemContent
-        {...props}
-        dataHook={`${richTextToolbarDataHook}.dropdownOption.header-one`}
-        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h1.title"
-        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h1.subtitle"
-        className={classes.dropdownHeaderOne}
-      />
-    ),
-  },
-  {
-    id: 'header-two',
-    value: (props) => (
-      <HeaderDropdownItemContent
-        {...props}
-        dataHook={`${richTextToolbarDataHook}.dropdownOption.header-two`}
-        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h2.title"
-        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h2.subtitle"
-        className={classes.dropdownHeaderTwo}
-      />
-    ),
-  },
-  {
-    id: 'header-three',
-    value: (props) => (
-      <HeaderDropdownItemContent
-        {...props}
-        dataHook={`${richTextToolbarDataHook}.dropdownOption.header-three`}
-        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h3.title"
-        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h3.subtitle"
-        className={classes.dropdownHeaderThree}
-      />
-    ),
-  },
-  {
-    id: 'header-four',
-    value: (props) => (
-      <HeaderDropdownItemContent
-        {...props}
-        dataHook={`${richTextToolbarDataHook}.dropdownOption.header-four`}
-        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h4.title"
-        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h4.subtitle"
-        className={classes.dropdownHeaderFour}
-      />
-    ),
-  },
-  {
-    id: 'header-five',
-    value: (props) => (
-      <HeaderDropdownItemContent
-        {...props}
-        dataHook={`${richTextToolbarDataHook}.dropdownOption.header-five`}
-        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h5.title"
-        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h5.subtitle"
-        className={classes.dropdownHeaderFive}
-      />
-    ),
-  },
-  {
-    id: 'header-six',
-    value: (props) => (
-      <HeaderDropdownItemContent
-        {...props}
-        dataHook={`${richTextToolbarDataHook}.dropdownOption.header-six`}
-        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h6.title"
-        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h6.subtitle"
-        className={classes.dropdownHeaderSix}
-      />
-    ),
-  },
-  {
-    id: 'paragraph-one',
-    value: (props) => (
-      <HeaderDropdownItemContent
-        {...props}
-        dataHook={`${richTextToolbarDataHook}.dropdownOption.paragraph-one`}
-        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p1.title"
-        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p1.subtitle"
-        className={classes.dropdownParagraphOne}
-      />
-    ),
-  },
-  {
-    id: 'unstyled',
-    value: (props) => (
-      <HeaderDropdownItemContent
-        {...props}
-        dataHook={`${richTextToolbarDataHook}.dropdownOption.unstyled`}
-        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p2.title"
-        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p2.subtitle"
-        className={classes.dropdownNormalText}
-      />
-    ),
-  },
-  {
-    id: 'paragraph-three',
-    value: (props) => (
-      <HeaderDropdownItemContent
-        {...props}
-        dataHook={`${richTextToolbarDataHook}.dropdownOption.paragraph-three`}
-        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p3.title"
-        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p3.subtitle"
-        className={classes.dropdownParagraphThree}
-      />
-    ),
-  },
-  {
-    id: 'help-text',
-    disabled: true,
-    overrideOptionStyle: true,
-    value: <HeaderDropdownHelpSection />,
-  },
-];
+const HEADING_IDS = new Set([
+  'header-one',
+  'header-two',
+  'header-three',
+  'header-four',
+  'header-five',
+  'header-six',
+  'help-text',
+]);
+
+const createDropdownOptions = (
+  headingsEnabled = true,
+): DropdownLayoutValueOption[] => {
+  const all: DropdownLayoutValueOption[] = [
+    {
+      id: 'header-one',
+      value: (props) => (
+        <HeaderDropdownItemContent
+          {...props}
+          dataHook={`${richTextToolbarDataHook}.dropdownOption.header-one`}
+          titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h1.title"
+          subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h1.subtitle"
+          className={classes.dropdownHeaderOne}
+        />
+      ),
+    },
+    {
+      id: 'header-two',
+      value: (props) => (
+        <HeaderDropdownItemContent
+          {...props}
+          dataHook={`${richTextToolbarDataHook}.dropdownOption.header-two`}
+          titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h2.title"
+          subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h2.subtitle"
+          className={classes.dropdownHeaderTwo}
+        />
+      ),
+    },
+    {
+      id: 'header-three',
+      value: (props) => (
+        <HeaderDropdownItemContent
+          {...props}
+          dataHook={`${richTextToolbarDataHook}.dropdownOption.header-three`}
+          titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h3.title"
+          subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h3.subtitle"
+          className={classes.dropdownHeaderThree}
+        />
+      ),
+    },
+    {
+      id: 'header-four',
+      value: (props) => (
+        <HeaderDropdownItemContent
+          {...props}
+          dataHook={`${richTextToolbarDataHook}.dropdownOption.header-four`}
+          titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h4.title"
+          subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h4.subtitle"
+          className={classes.dropdownHeaderFour}
+        />
+      ),
+    },
+    {
+      id: 'header-five',
+      value: (props) => (
+        <HeaderDropdownItemContent
+          {...props}
+          dataHook={`${richTextToolbarDataHook}.dropdownOption.header-five`}
+          titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h5.title"
+          subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h5.subtitle"
+          className={classes.dropdownHeaderFive}
+        />
+      ),
+    },
+    {
+      id: 'header-six',
+      value: (props) => (
+        <HeaderDropdownItemContent
+          {...props}
+          dataHook={`${richTextToolbarDataHook}.dropdownOption.header-six`}
+          titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h6.title"
+          subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h6.subtitle"
+          className={classes.dropdownHeaderSix}
+        />
+      ),
+    },
+    {
+      id: 'paragraph-one',
+      value: (props) => (
+        <HeaderDropdownItemContent
+          {...props}
+          dataHook={`${richTextToolbarDataHook}.dropdownOption.paragraph-one`}
+          titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p1.title"
+          subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p1.subtitle"
+          className={classes.dropdownParagraphOne}
+        />
+      ),
+    },
+    {
+      id: 'unstyled',
+      value: (props) => (
+        <HeaderDropdownItemContent
+          {...props}
+          dataHook={`${richTextToolbarDataHook}.dropdownOption.unstyled`}
+          titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p2.title"
+          subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p2.subtitle"
+          className={classes.dropdownNormalText}
+        />
+      ),
+    },
+    {
+      id: 'paragraph-three',
+      value: (props) => (
+        <HeaderDropdownItemContent
+          {...props}
+          dataHook={`${richTextToolbarDataHook}.dropdownOption.paragraph-three`}
+          titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p3.title"
+          subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p3.subtitle"
+          className={classes.dropdownParagraphThree}
+        />
+      ),
+    },
+    {
+      id: 'help-text',
+      disabled: true,
+      overrideOptionStyle: true,
+      value: <HeaderDropdownHelpSection />,
+    },
+  ];
+  if (!headingsEnabled) {
+    return all.filter((opt) => !HEADING_IDS.has(String(opt.id)));
+  }
+  return all;
+};
 
 const headerTypeIconMap: Record<string, React.ReactElement> = {
   'header-one': <HeaderOneIcon />,
@@ -221,15 +243,20 @@ const headerTypeIconMap: Record<string, React.ReactElement> = {
 export interface HeaderDropdownProps {
   value?: string;
   onChange: (value: string) => void;
+  headingsEnabled?: boolean;
 }
 
 export const HeaderDropdown: React.FC<HeaderDropdownProps> = ({
   value,
   onChange,
+  headingsEnabled = true,
 }) => {
   const { t } = useTranslations();
 
-  const dropdownOptions = React.useMemo(() => createDropdownOptions(), []);
+  const dropdownOptions = React.useMemo(
+    () => createDropdownOptions(headingsEnabled),
+    [headingsEnabled],
+  );
 
   const onSelect = useCallback(
     (option: DropdownLayoutValueOption) => onChange(String(option.id)),

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css

@@ -2,6 +2,7 @@
 @property st-global(--wds-color-black-400);
 @property st-global(--wds-color-white);
 @property st-global(--wds-font-family-default);
+@property st-global(--wsr-font-family);
 @property st-global(--wds-font-weight-medium);
 @property st-global(--wds-font-weight-bold);
 @property st-global(--wds-font-size-500);
@@ -10,8 +11,8 @@
 .root {
     padding: 12px 18px;
     display: flex;
-    border-bottom: 1px solid var(--wds-color-blue-400);
-    background: var(--wds-color-white);
+    border-bottom: 1px solid var(--wds-color-blue-400, var(--wsr-color-B40, #d6dcff));
+    background: var(--wds-color-white, var(--wsr-color-D80, #ffffff));
     align-items: center;
 }
 
@@ -30,7 +31,7 @@
     display: inline-flex;
     margin-right: 12px;
     border-left: 1px solid #ddd;
-    height: 100%;
+    align-self: stretch;
 }
 
 .clearFormatting {
@@ -65,53 +66,53 @@
     font-weight: var(--wds-font-weight-bold) !important;
     font-size: 36px !important;
     line-height: 1.2 !important;
-    font-family: var(--wds-font-family-default) !important;
+    font-family: var(--wds-font-family-default, var(--wsr-font-family, Madefor)) !important;
 }
 .dropdownHeaderTwo {
     font-weight: var(--wds-font-weight-bold) !important;
     font-size: 32px !important;
     line-height: 1.2 !important;
-    font-family: var(--wds-font-family-default) !important;
+    font-family: var(--wds-font-family-default, Madefor, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
 }
 .dropdownHeaderThree {
     font-weight: var(--wds-font-weight-medium) !important;
     font-size: 28px !important;
     line-height: 1.2 !important;
-    font-family: var(--wds-font-family-default) !important;
+    font-family: var(--wds-font-family-default, Madefor, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
 }
 .dropdownHeaderFour {
     font-weight: var(--wds-font-weight-bold) !important;
     font-size: 24px !important;
     line-height: 1.2 !important;
-    font-family: var(--wds-font-family-default) !important;
+    font-family: var(--wds-font-family-default, Madefor, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
 }
 .dropdownHeaderFive {
     font-weight: var(--wds-font-weight-bold) !important;
     font-size: 22px !important;
     line-height: 1.2 !important;
-    font-family: var(--wds-font-family-default) !important;
+    font-family: var(--wds-font-family-default, Madefor, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
 }
 .dropdownHeaderSix {
     font-weight: var(--wds-font-weight-medium) !important;
     font-size: 20px !important;
     line-height: 1.2 !important;
-    font-family: var(--wds-font-family-default) !important;
+    font-family: var(--wds-font-family-default, Madefor, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
 }
 .dropdownParagraphOne {
     font-weight: var(--wds-font-weight-medium) !important;
     font-size: 18px !important;
     line-height: 1.33 !important;
-    font-family: var(--wds-font-family-default) !important;
+    font-family: var(--wds-font-family-default, Madefor, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
 }
 .dropdownNormalText {
     font-weight: var(--wds-font-weight-medium) !important;
     font-size: var(--wds-font-size-500) !important;
     line-height: var(--wds-font-line-height-300) !important;
-    font-family: var(--wds-font-family-default) !important;
+    font-family: var(--wds-font-family-default, Madefor, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
 }
 .dropdownParagraphThree {
     font-weight: var(--wds-font-weight-medium) !important;
     font-size: 14px !important;
     line-height: 1.29 !important;
-    font-family: var(--wds-font-family-default) !important;
+    font-family: var(--wds-font-family-default, Madefor, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
 }

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "toolbar2031504778";
+var _namespace_ = "toolbar384511078";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"toolbar2031504778__root","item":"toolbar2031504778__item","separator":"toolbar2031504778__separator","clearFormatting":"toolbar2031504778__clearFormatting","fullScreen":"toolbar2031504778__fullScreen","dropdownItemContent":"toolbar2031504778__dropdownItemContent","dropdownItemTitle":"toolbar2031504778__dropdownItemTitle","dropdownItemSubtitle":"toolbar2031504778__dropdownItemSubtitle","dropdownHeaderOne":"toolbar2031504778__dropdownHeaderOne","dropdownHeaderTwo":"toolbar2031504778__dropdownHeaderTwo","dropdownHeaderThree":"toolbar2031504778__dropdownHeaderThree","dropdownHeaderFour":"toolbar2031504778__dropdownHeaderFour","dropdownHeaderFive":"toolbar2031504778__dropdownHeaderFive","dropdownHeaderSix":"toolbar2031504778__dropdownHeaderSix","dropdownParagraphOne":"toolbar2031504778__dropdownParagraphOne","dropdownNormalText":"toolbar2031504778__dropdownNormalText","dropdownParagraphThree":"toolbar2031504778__dropdownParagraphThree"};
+export var classes = {"root":"toolbar384511078__root","item":"toolbar384511078__item","separator":"toolbar384511078__separator","clearFormatting":"toolbar384511078__clearFormatting","fullScreen":"toolbar384511078__fullScreen","dropdownItemContent":"toolbar384511078__dropdownItemContent","dropdownItemTitle":"toolbar384511078__dropdownItemTitle","dropdownItemSubtitle":"toolbar384511078__dropdownItemSubtitle","dropdownHeaderOne":"toolbar384511078__dropdownHeaderOne","dropdownHeaderTwo":"toolbar384511078__dropdownHeaderTwo","dropdownHeaderThree":"toolbar384511078__dropdownHeaderThree","dropdownHeaderFour":"toolbar384511078__dropdownHeaderFour","dropdownHeaderFive":"toolbar384511078__dropdownHeaderFive","dropdownHeaderSix":"toolbar384511078__dropdownHeaderSix","dropdownParagraphOne":"toolbar384511078__dropdownParagraphOne","dropdownNormalText":"toolbar384511078__dropdownNormalText","dropdownParagraphThree":"toolbar384511078__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-blue-400":"--wds-color-blue-400","wds-color-black-400":"--wds-color-black-400","wds-color-white":"--wds-color-white","wds-font-family-default":"--wds-font-family-default","wds-font-weight-medium":"--wds-font-weight-medium","wds-font-weight-bold":"--wds-font-weight-bold","wds-font-size-500":"--wds-font-size-500","wds-font-line-height-300":"--wds-font-line-height-300"}; 
+export var vars = {"wds-color-blue-400":"--wds-color-blue-400","wds-color-black-400":"--wds-color-black-400","wds-color-white":"--wds-color-white","wds-font-family-default":"--wds-font-family-default","wsr-font-family":"--wsr-font-family","wds-font-weight-medium":"--wds-font-weight-medium","wds-font-weight-bold":"--wds-font-weight-bold","wds-font-size-500":"--wds-font-size-500","wds-font-line-height-300":"--wds-font-line-height-300","wsr-color-B40":"--toolbar384511078-wsr-color-B40","wsr-color-D80":"--toolbar384511078-wsr-color-D80"}; 
 
 
 

package/src/components/text/text-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "textview4186768641";
+var _namespace_ = "textview1395270151";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"textview4186768641__root","textView":"textview4186768641__textView"};
+export var classes = {"root":"textview1395270151__root","textView":"textview1395270151__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};