@wix/patterns 1.255.0 → 1.256.0

package/src/components/MagnifyingGlassArt/MagnifyingGlassArt.tsx

@@ -0,0 +1,136 @@
+import React, { memo, SVGAttributes } from 'react';
+
+export const MagnifyingGlassArt = memo(function MagnifyingGlassArt(
+  props: SVGAttributes<HTMLOrSVGElement>,
+) {
+  return (
+    <svg width="120" height="120" viewBox="0 0 120 120" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <g>
+          <path
+            fill="#F0F4F7"
+            d="M0 0H1188V900H0z"
+            transform="translate(-648 -441)"
+          />
+          <path
+            fill="#F0F4F7"
+            d="M0 0H1188V900H0z"
+            transform="translate(-648 -441)"
+          />
+          <g transform="translate(-648 -441) translate(276 156)">
+            <path d="M0 8c0-4.418 3.576-8 7.994-8h849.012C861.421 0 865 3.574 865 8v679c0 4.418-3.576 8-7.994 8H7.994C3.579 695 0 691.426 0 687V8z" />
+          </g>
+          <g>
+            <g>
+              <g fill="#FFF">
+                <path
+                  d="M0 7.992C0 3.578 3.585 0 7.995 0h851.01C863.42 0 867 3.58 867 7.992v398.016c0 4.414-3.585 7.992-7.995 7.992H7.995C3.58 414 0 410.42 0 406.008V7.992z"
+                  transform="translate(-648 -441) translate(274 319)"
+                />
+              </g>
+              <g>
+                <path
+                  fill="#FFF"
+                  d="M0 0H867V336H0z"
+                  transform="translate(-648 -441) translate(274 319) translate(0 78)"
+                />
+                <g>
+                  <g>
+                    <path
+                      fill="#FFD527"
+                      d="M113.867 62.832L28.793 62.773 29.846 0.561 114.92 0.62z"
+                      transform="translate(-648 -441) translate(274 319) translate(0 78) translate(373.5 42) translate(2.54 11.022)"
+                    />
+                    <path
+                      fill="#FFF"
+                      d="M37.914 16.15l39.265.027-1.337 38.882-39.265-.027 1.337-38.882zm69.853 26.618c1.438 0 2.604 1.167 2.604 2.605s-1.166 2.605-2.604 2.605h-10.42c-1.438 0-2.604-1.167-2.604-2.605s1.166-2.605 2.604-2.605h10.42z"
+                      transform="translate(-648 -441) translate(274 319) translate(0 78) translate(373.5 42) translate(2.54 11.022)"
+                    />
+                    <path
+                      fill="#116DFF"
+                      d="M61.85 27.142l-8.606-.003c-5.916-.002-10.794 4.77-10.895 10.656l-.13 7.53 30.03.01.129-7.529c.102-5.888-4.612-10.662-10.528-10.664"
+                      transform="translate(-648 -441) translate(274 319) translate(0 78) translate(373.5 42) translate(2.54 11.022)"
+                    />
+                    <path
+                      fill="#FFB8AA"
+                      d="M60.91 19.38c1.755 1.775 1.705 4.655-.11 6.43-1.815 1.775-4.708 1.774-6.462-.002"
+                      transform="translate(-648 -441) translate(274 319) translate(0 78) translate(373.5 42) translate(2.54 11.022)"
+                    />
+                    <path
+                      fill="#192C55"
+                      d="M56.006 18.37c.396-.976.498-2.116.194-3.312-.525-2.07-2.276-3.738-4.333-4.127-3.681-.698-6.592 2.496-5.652 6.2.525 2.07 2.275 3.739 4.333 4.129 1.028.194 1.992.077 2.834-.262-.637 1.618-.33 3.508.956 4.81l6.572-6.43c-1.307-1.323-3.248-1.658-4.904-1.008"
+                      transform="translate(-648 -441) translate(274 319) translate(0 78) translate(373.5 42) translate(2.54 11.022)"
+                    />
+                    <path
+                      fill="#CCE1FF"
+                      d="M85.288 98.245L1.042 98.304 0 35.481 84.246 35.422z"
+                      transform="translate(-648 -441) translate(274 319) translate(0 78) translate(373.5 42) translate(2.54 11.022)"
+                    />
+                    <path
+                      fill="#FFF"
+                      d="M46.494 51.132l1.226 35.993-38.883.027L7.612 51.16l38.882-.028zm28.06 26.802c1.438 0 2.605 1.167 2.605 2.605s-1.167 2.605-2.605 2.605h-10.42c-1.438 0-2.604-1.167-2.604-2.605s1.166-2.605 2.604-2.605h10.42z"
+                      transform="translate(-648 -441) translate(274 319) translate(0 78) translate(373.5 42) translate(2.54 11.022)"
+                    />
+                    <path
+                      fill="#192C55"
+                      d="M35.48 83.144c0 1.439 1.166 2.605 2.605 2.605h3.582c.899 0 1.628.729 1.628 1.628 0 .899-.729 1.628-1.628 1.628H30.271v-5.861h5.209zm-10.42 0v5.86H13.664c-.898 0-1.628-.728-1.628-1.627 0-.852.655-1.551 1.488-1.622l.14-.006h3.582c1.384 0 2.515-1.078 2.6-2.44l.005-.165h5.209z"
+                      transform="translate(-648 -441) translate(274 319) translate(0 78) translate(373.5 42) translate(2.54 11.022)"
+                    />
+                    <path
+                      fill="#FAAD4D"
+                      d="M43.53 83.178L12.347 83.189 11.801 51.201 42.984 51.19z"
+                      transform="translate(-648 -441) translate(274 319) translate(0 78) translate(373.5 42) translate(2.54 11.022)"
+                    />
+                    <path
+                      fill="#FFB8AA"
+                      d="M58.531 23.512c-.519.507-1.345.507-1.846 0-.502-.508-.487-1.33.032-1.838.518-.507 1.344-.507 1.846.001.501.507.487 1.33-.032 1.837"
+                      transform="translate(-648 -441) translate(274 319) translate(0 78) translate(373.5 42) translate(2.54 11.022)"
+                    />
+                    <path
+                      fill="#192C55"
+                      d="M27.892 51.186l.546 31.988-1 .017-.546-31.988 1-.017zM77.16 66.69v1H61.53v-1h15.63zm-4.56-3.907v1H61.53v-1H72.6zm4.56-3.907v1H61.53v-1h15.63zM5.136 38.73c.541 0 .978.437.978.977 0 .539-.437.977-.978.977-.539 0-.976-.438-.976-.977 0-.54.437-.977.976-.977zm3.908 0c.54 0 .977.437.977.977 0 .539-.437.977-.977.977s-.977-.438-.977-.977c0-.54.437-.977.977-.977zm3.908 0c.54 0 .977.437.977.977 0 .539-.437.977-.977.977s-.977-.438-.977-.977c0-.54.437-.977.977-.977zm97.42-7.208v1h-15.63v-1h15.63zm-4.56-3.907v1h-11.07v-1h11.07zm4.56-3.907v1h-15.63v-1h15.63zM2.246 1.1C7.48-1.15 13.91.131 17.88 4.222c1.184 1.223 2.261 3.083 2.05 4.851.336.193.664.398.987.616 1.4.952 2.134 1.951 2.24 3.056.117 1.257-.605 2.317-1.647 3.074.831.522 1.582 1.166 2.21 1.915.305.364.675.858.83 1.461.368 1.46-.692 2.873-1.873 3.462-1.008.504-2.125.591-3.162.613l-.557.008-.01-1 .548-.008c.928-.02 1.913-.098 2.733-.508.847-.42 1.581-1.404 1.351-2.32-.105-.407-.389-.783-.624-1.064-.674-.803-1.503-1.47-2.423-1.978-.323.157-.66.29-.999.393-1.648.51-3.42.671-5.134.466-.38-.045-.772-.129-1.065-.44-.208-.22-.32-.52-.31-.844.012-.377.183-.758.458-1.018.42-.397.974-.52 1.458-.589 1.892-.267 3.856.075 5.578.904.982-.58 1.736-1.44 1.641-2.432-.075-.79-.666-1.55-1.807-2.324-.225-.154-.458-.302-.692-.442-.05.112-.106.222-.167.332-.906 1.6-3.03 2.356-5.695 2.024-1.832-.228-3.596-.767-5.244-1.602-.506-.258-1.05-.605-1.25-1.22-.135-.42-.082-.845.156-1.227.462-.744 1.484-1.137 2.22-1.248 3.145-.472 6.42.045 9.28 1.428-.02-1.31-.878-2.692-1.8-3.643-3.55-3.662-9.48-4.908-14.22-3.022l-.302.124-.393-.919zm13.98 14.177c-.383 0-.765.026-1.145.08-.328.046-.696.121-.91.326-.084.08-.143.207-.147.32 0 .04.004.094.036.127.068.073.25.107.376.125l.081.01c1.446.173 2.936.063 4.341-.317l.415-.122c-.974-.358-2.012-.549-3.047-.549zm-4.24-7.316c-.722 0-1.442.053-2.156.161-.659.1-1.298.43-1.52.785-.082.133-.097.254-.053.393.086.266.427.471.753.635 1.541.783 3.195 1.288 4.912 1.502l.32.033c1.086.092 3.453.082 4.383-1.558.06-.107.111-.216.155-.326-2.096-1.064-4.444-1.625-6.794-1.625zm22.491-4.234c.54 0 .977.437.977.977s-.437.977-.977.977c-.539 0-.976-.437-.976-.977s.437-.977.976-.977zm3.907 0c.541 0 .978.437.978.977s-.437.977-.978.977c-.539 0-.976-.437-.976-.977s.437-.977.976-.977zm3.907 0c.542 0 .979.437.979.977s-.438.977-.979.977c-.538 0-.975-.437-.975-.977s.436-.977.975-.977z"
+                      transform="translate(-648 -441) translate(274 319) translate(0 78) translate(373.5 42) translate(2.54 11.022)"
+                    />
+                  </g>
+                </g>
+              </g>
+            </g>
+            <path
+              fill="#FFF"
+              d="M330 101H540V242H330z"
+              transform="translate(-648 -441) translate(274 319)"
+            />
+            <g>
+              <path
+                d="M0 0H120V120H0z"
+                transform="translate(-648 -441) translate(274 319) translate(374 122)"
+              />
+              <g
+                fillRule="nonzero"
+                transform="translate(-648 -441) translate(274 319) translate(374 122) translate(0 21)"
+              >
+                <circle cx="31.1" cy="54.8" r="7.9" fill="#28BF9A" />
+                <path
+                  fill="#116DFF"
+                  d="M106.1 59.5L118.6 72c1.2 1.2 1.2 3.1 0 4.2-1.2 1.2-3.1 1.2-4.2 0l-12.5-12.5c-1.2-1.2-1.2-3.1 0-4.2 1.1-1.1 3-1.1 4.2 0zM25.9.8c6.6 0 12 5.4 12 12s-5.4 12-12 12-12-5.4-12-12 5.4-12 12-12z"
+                />
+                <path
+                  fill="#C2E2FF"
+                  d="M78.3 13.8c7.7 2.8 13.4 9.2 15.2 17 2.4.6 4.6 1.7 6.6 3.3.1.5.1 1 .2 1.4.4 4.4-.3 8.9-2 13C95.6 54.8 90.8 60 84.7 63c-.4.2-.9.4-1.3.6-2.6-1-4.8-2.5-6.6-4.4-9.7 2.8-20.2-.9-26-9.2-6-8.5-5.8-19.9.5-28.2s17.2-11.5 27-8zM16 38.3l2.8 2.8-2.8 2.7-2.7-2.8 2.7-2.7zM6.1 27.6L7.5 32l4.4 1.4-4.4 1.4-1.4 4.4-1.4-4.4-4.4-1.4L4.7 32l1.4-4.4zm100-25.3l1.7 5.2 5.2 1.7-5.2 1.7-1.7 5.2-1.7-5.2-5.2-1.7 5.2-1.7 1.7-5.2z"
+                />
+                <path
+                  fill="#FFF"
+                  d="M73.1 33.5c1.7 0 3.2.6 4.3 1.6l-.2.2c.3-.4.7-.7 1.1-1 .5 0 .9.1 1.3.2.5.1 1 .3 1.4.5 2.3.9 4.1 2.7 5.1 5 .9 2.3.9 4.8 0 7.1-2 4.7-7.4 7-12.1 5h-.1l-1.2-.6v-.1l-.1-.4c-.1-.4-.2-.9-.2-1.3-.1-1.1-.2-2.2-.1-3.3-3.2-.4-5.7-3.1-5.7-6.4 0-3.6 2.9-6.5 6.5-6.5zm-16.3-8c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm21.5-11.7c0 4.4-3.6 8-8 8s-8-3.6-8-8c5.1-1.8 10.8-1.8 16 0z"
+                />
+                <path
+                  fill="#192C55"
+                  d="M78.3 34.3c6.3-5.3 15.4-5.4 21.8-.3.4.3.7.6 1.1.9l.3.3c3.2 3.2 5 7.6 5 12.1s-1.8 8.9-5 12.2c-4.7 4.8-11.8 6.3-18.1 4-5.3-2-9.2-6.3-10.6-11.7l-.1-.4v-.1l-.1-.3c-.1-.4-.2-.9-.2-1.3-.3-2.6-.1-5.2.7-7.7l.2-.5v-.1c.3-.9.7-1.8 1.2-2.6.8-1.3 1.7-2.5 2.8-3.6.3-.2.6-.6 1-.9zm21.9 1.2c-5.8-5.2-14.4-5.6-20.6-.9-.6.4-1.1.9-1.7 1.4-1.5 1.5-2.8 3.4-3.6 5.4l-.2.4h-.5l.5.2c-.9 2.4-1.2 5-.8 7.6 0 .3.1.5.1.8l.1.4.1.3c.1.4.2.7.3 1 1.6 5.2 5.6 9.3 10.8 10.8 5.6 1.7 11.6.3 15.8-3.7l.3-.3c3-3 4.8-7.1 4.8-11.4 0-4.3-1.7-8.4-4.8-11.4-.2-.3-.4-.5-.6-.6zM47.5 9.6c.4 2.9-12.3 5.7-19.8 6.9l-.8.1c-4.8.7-9.7 1.2-14.5 1.2h-.6c-3.7 0-6.4-.5-6.6-1.9-.2-1.4 2.7-3 8.7-4.6l.3 1-.7.2c-6.1 1.7-7.4 3-7.3 3.3.1 1 7.3 1.8 20.6-.2l1-.2c12.4-2 18.7-4.7 18.7-5.7 0-.3-1.8-1.3-9.6-.9v-1h.8c6.2-.3 9.5.3 9.8 1.8z"
+                />
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+});

package/src/components/MagnifyingGlassArt/index.ts

@@ -0,0 +1 @@
+export * from './MagnifyingGlassArt';

package/src/components/MaxHeightText/MaxHeightText.st.css

@@ -0,0 +1,9 @@
+.root {
+  -st-states: height24;
+
+  opacity: 1;
+}
+
+.root:height24 {
+  line-height: 24px;
+}

package/src/components/MaxHeightText/MaxHeightText.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "MaxHeightText1147702688";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"MaxHeightText1147702688__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/src/components/MaxHeightText/MaxHeightText.tsx

@@ -0,0 +1,20 @@
+import { Text, TextProps } from '@wix/design-system';
+import { st, classes } from './MaxHeightText.st.css.js';
+import React from 'react';
+
+export function MaxHeightText(props: TextProps & { lineHeight?: number }) {
+  const { lineHeight, className, ...rest } = props;
+
+  return (
+    <Text
+      {...rest}
+      className={st(
+        classes.root,
+        {
+          height24: lineHeight === 24,
+        },
+        className,
+      )}
+    />
+  );
+}

package/src/components/MaxHeightText/index.ts

@@ -0,0 +1 @@
+export * from './MaxHeightText';

package/src/components/MaxLines/MaxLines.st.css

@@ -0,0 +1,10 @@
+.root {
+  overflow: hidden;
+
+  -st-states: clamp;
+}
+
+.root:clamp {
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+}

package/src/components/MaxLines/MaxLines.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "MaxLines4115686776";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"MaxLines4115686776__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/src/components/MaxLines/MaxLines.tsx

@@ -0,0 +1,79 @@
+import React, {
+  CSSProperties,
+  HTMLAttributes,
+  ReactElement,
+  useMemo,
+} from 'react';
+import classNames from 'classnames';
+import { st, classes } from './MaxLines.st.css.js';
+
+export type BaseComponentProps = Pick<
+  HTMLAttributes<Element>,
+  'className' | 'style'
+>;
+
+export interface MaxLinesProps<P extends BaseComponentProps>
+  extends BaseComponentProps {
+  maxLines?: number;
+  webkitLineClamp?: boolean;
+  lineHeight?: number;
+  wordBreak: CSSProperties['wordBreak'];
+  textOverflow?: CSSProperties['textOverflow'];
+  children:
+    | ReactElement<P>
+    | ((props: BaseComponentProps) => React.ReactElement<P>);
+}
+
+export function MaxLines<P extends BaseComponentProps>(
+  props: MaxLinesProps<P>,
+) {
+  const {
+    children,
+    maxLines = 1,
+    lineHeight,
+    webkitLineClamp,
+    textOverflow,
+    wordBreak,
+    ...rest
+  } = props;
+
+  const style = useMemo<CSSProperties>(
+    () => ({
+      ...(webkitLineClamp && { WebkitLineClamp: maxLines }),
+      ...(textOverflow && { textOverflow }),
+      ...(lineHeight && {
+        lineHeight: `${lineHeight}px`,
+        maxHeight: `${lineHeight * maxLines}px`,
+      }),
+      wordBreak,
+      ...rest.style,
+    }),
+    [rest.style, maxLines, webkitLineClamp, lineHeight],
+  );
+
+  const className = st(
+    classes.root,
+    {
+      clamp: webkitLineClamp,
+    },
+    rest.className,
+  );
+
+  let child;
+  if (typeof children === 'function') {
+    child = children({ className, style });
+  } else {
+    const { type: WrappedComponent, props: wrappedProps } = children;
+
+    child = (
+      <WrappedComponent
+        {...rest}
+        {...wrappedProps}
+        className={classNames(className, wrappedProps.className)}
+        style={{ ...style, ...wrappedProps.style }}
+      />
+    );
+  }
+
+  return child;
+}

package/src/components/MaxLines/index.ts

@@ -0,0 +1 @@
+export * from './MaxLines';

package/src/components/MaxSelection.tsx

@@ -0,0 +1,106 @@
+import { CollectionState, Translate } from '@wix/bex-core';
+import React from 'react';
+import { Text } from '@wix/design-system';
+
+export type MultipleSelection = boolean | number;
+
+export type ReplaceMultiple<T> = Omit<T, 'multiple'> & T extends {
+  multiple?: any;
+}
+  ? { multiple?: MultipleSelection }
+  : {
+      multiple: MultipleSelection;
+    };
+
+export function fromMultipleSelectionToBoolean(
+  multipleSelection?: MultipleSelection,
+): boolean {
+  if (multipleSelection === undefined) {
+    return false;
+  }
+  if (typeof multipleSelection === 'boolean') {
+    return multipleSelection;
+  }
+  return multipleSelection > 1;
+}
+
+function maxSelectedItemsFromMultipleSelection(
+  multipleSelection?: MultipleSelection,
+): number {
+  if (typeof multipleSelection === 'undefined') {
+    return 1;
+  }
+
+  if (typeof multipleSelection === 'boolean') {
+    return multipleSelection ? Infinity : 1;
+  }
+
+  return multipleSelection;
+}
+
+export function showMaxSelectionLabel(multipleSelection?: MultipleSelection) {
+  const maxSelectedItems =
+    maxSelectedItemsFromMultipleSelection(multipleSelection);
+  return !(maxSelectedItems === 1 || maxSelectedItems === Infinity);
+}
+
+export type MaxSelectionLabelProps = {
+  dataHook?: string;
+  multiple?: MultipleSelection;
+  t: Translate;
+  customLabel?(_: { num: number; max: number }): string;
+  selectedCount: number;
+};
+
+export function BulkSelectionMaxSelectionLabel(props: MaxSelectionLabelProps) {
+  const { selectedCount, t, multiple, dataHook } = props;
+
+  const maxSelectedItems = maxSelectedItemsFromMultipleSelection(multiple);
+
+  let text;
+
+  if (props.customLabel) {
+    text = props.customLabel({
+      num: selectedCount,
+      max: maxSelectedItems,
+    });
+  } else if (selectedCount === 0) {
+    text = t('cairo.bulkSelected.selectUpTo', {
+      max: maxSelectedItems,
+    });
+  } else if (maxSelectedItems > selectedCount) {
+    text = t('cairo.picker.itemsSelected', {
+      total: selectedCount,
+      max: maxSelectedItems,
+    });
+  } else {
+    text = t('cairo.bulkSelected.withMaxNumber', {
+      num: selectedCount,
+      max: maxSelectedItems,
+    });
+  }
+
+  return (
+    <Text dataHook={dataHook} secondary>
+      {text}
+    </Text>
+  );
+}
+
+export function reachedMaxSelection({
+  collection,
+  multiple,
+}: {
+  multiple?: MultipleSelection;
+  collection: Pick<CollectionState<any, any>, 'bulkSelect'>;
+}) {
+  if (
+    typeof multiple === 'undefined' ||
+    typeof multiple === 'boolean' ||
+    multiple <= 1
+  ) {
+    return false;
+  }
+
+  return collection.bulkSelect.selectedCount >= multiple;
+}

package/src/components/MaybeTooltip.tsx

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import { Tooltip, TooltipProps } from '@wix/design-system';
+
+export function MaybeTooltip(props: TooltipProps & { children?: ReactNode }) {
+  const { content, children, ...rest } = props;
+
+  if (!content) {
+    return <>{children}</>;
+  }
+
+  return (
+    <Tooltip content={content} {...rest}>
+      {children}
+    </Tooltip>
+  );
+}

package/src/components/ModalHeadingBox/ModalHeadingBox.tsx

@@ -0,0 +1,29 @@
+import { Box, BoxProps } from '@wix/design-system';
+import { BaseComponentProps, MaxLines, MaxLinesProps } from '../MaxLines';
+import React from 'react';
+
+export interface ModalHeadingBoxProps<P extends BaseComponentProps>
+  extends Partial<BoxProps> {
+  children: MaxLinesProps<P>['children'];
+  maxLines?: MaxLinesProps<P>['maxLines'];
+  lineHeight: MaxLinesProps<P>['lineHeight'];
+}
+
+export function ModalHeadingBox<P extends BaseComponentProps>(
+  props: ModalHeadingBoxProps<P>,
+) {
+  const { children, maxLines, lineHeight, ...rest } = props;
+
+  return (
+    <Box minWidth={0} boxSizing="border-box" direction="vertical" {...rest}>
+      <MaxLines
+        webkitLineClamp={false}
+        lineHeight={lineHeight}
+        maxLines={maxLines}
+        wordBreak="break-word"
+      >
+        {children}
+      </MaxLines>
+    </Box>
+  );
+}

package/src/components/ModalHeadingBox/index.ts

@@ -0,0 +1 @@
+export * from './ModalHeadingBox';

package/src/components/MoreActions/ExploreAppsModal.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ModuleRegistry } from 'react-module-container';
+import { observer } from 'mobx-react-lite';
+import type { ExploreAppsState } from './ExploreAppsState';
+
+function _ExploreAppsModal({ state }: { state: ExploreAppsState }) {
+  if (!state.isModalOpen) {
+    return null;
+  }
+  const InContextAppsModal = ModuleRegistry.component('in-context-apps-modal');
+  return (
+    <InContextAppsModal
+      title={state.modalProps.title}
+      subTitle={state.modalProps.subtitle}
+      tagIds={[state.modalProps.tag]}
+      origin="patterns-more-action"
+      dataHook="explore-apps-modal"
+      isOpen={state.isModalOpen}
+      onClose={() => state.closeExploreAppsModal()}
+      onInstallationSuccess={({ appId }: { appId: string }) =>
+        state.onInstallationSuccess({ appId })
+      }
+    />
+  );
+}
+
+export const ExploreAppsModal = observer(_ExploreAppsModal);

package/src/components/MoreActions/ExploreAppsState.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { ReportProps } from '@wix/fe-essentials/bi';
+import { action, makeObservable, observable } from 'mobx';
+import { wixPatternsAppWasInstalledSrc144Evid200 } from '@wix/bex-core/bi';
+import { ExploreAppsModal } from './ExploreAppsModal';
+import { RelatedApps } from '@wix/wix-ui-icons-common';
+
+export interface ExploreAppsModalProps {
+  title: string;
+  subtitle: string;
+  tag: string;
+}
+
+export interface ExploreAppsActionItem {
+  biName: string;
+  text: string;
+  prefixIcon: JSX.Element;
+  onClick: () => void;
+  modalProps: ExploreAppsModalProps;
+}
+
+interface ExploreAppsStateParams {
+  modalProps: ExploreAppsModalProps;
+  reportBi: (reportProps: ReportProps) => void;
+  translatedText: string;
+}
+export class ExploreAppsState {
+  modalProps: ExploreAppsModalProps;
+  moreActionsMenuItem: ExploreAppsActionItem;
+  isModalOpen = false;
+  reportBi = (_reportProps: ReportProps) => {};
+  Modal: ({ state }: { state: ExploreAppsState }) => JSX.Element | null;
+
+  constructor({
+    modalProps,
+    reportBi,
+    translatedText,
+  }: ExploreAppsStateParams) {
+    this.modalProps = modalProps;
+    this.moreActionsMenuItem = {
+      biName: 'Explore Apps',
+      text: translatedText,
+      prefixIcon: <RelatedApps />,
+      onClick: this.openExploreAppsModal.bind(this),
+      modalProps,
+    };
+    this.reportBi = reportBi;
+    this.Modal = ExploreAppsModal;
+    makeObservable(this, {
+      modalProps: observable.ref,
+      moreActionsMenuItem: observable.ref,
+      isModalOpen: observable,
+      openExploreAppsModal: action,
+      closeExploreAppsModal: action,
+    });
+  }
+
+  openExploreAppsModal() {
+    this.isModalOpen = true;
+  }
+
+  closeExploreAppsModal() {
+    this.isModalOpen = false;
+  }
+
+  onInstallationSuccess({ appId }: { appId: string }) {
+    this.reportBi(wixPatternsAppWasInstalledSrc144Evid200({ appId }));
+  }
+}

package/src/components/MoreActions/MoreActions.uni.driver.ts

@@ -0,0 +1,55 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  PopoverMenuUniDriver,
+  TooltipUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+export const MoreActionsUniDriver = (base: UniDriver, body: UniDriver) => {
+  const moreActionsPopoverDriver = (dataHook: string) =>
+    PopoverMenuUniDriver(base.$(`[data-hook="${dataHook}"]`), body);
+
+  const getMoreActions = (dataHook = 'more-actions') => ({
+    exists: () => moreActionsPopoverDriver(dataHook).exists(),
+
+    /** Gets trigger element of more Actions */
+    getTriggerElement: () =>
+      moreActionsPopoverDriver(dataHook).getTriggerElement(
+        'more-actions-popover-button',
+      ),
+
+    /** Opens the more actions popover */
+    open: () =>
+      moreActionsPopoverDriver(dataHook)
+        .getTriggerElement('more-actions-popover-button')
+        .click(),
+
+    /** Indicates whether the more actions popover is open */
+    isOpen: () => moreActionsPopoverDriver(dataHook).isMenuOpen(),
+
+    /** Clicks at child by data-hook */
+    clickAtChildByDataHook: (childDataHook: string) =>
+      moreActionsPopoverDriver(dataHook).clickAtChildByDataHook(childDataHook),
+
+    /** Clicks at child by index */
+    clickAtChildByIndex: (index: number) =>
+      moreActionsPopoverDriver(dataHook).clickAtChild(index),
+
+    /** Gets content at index */
+    childContentAt: (index: number) =>
+      moreActionsPopoverDriver(dataHook).itemContentAt(index),
+
+    /** Gets children count */
+    childrenCount: () => moreActionsPopoverDriver(dataHook).childrenCount(),
+
+    getTooltip: () => {
+      return TooltipUniDriver(
+        base.$('[data-hook="more-actions-tooltip"]'),
+        body,
+      );
+    },
+  });
+
+  return {
+    getMoreActions,
+  };
+};