@eightshift/frontend-libs-tailwind 1.5.0 → 2.0.0

package/blocks/init/src/Blocks/assets/styles/fonts.css

@@ -1,90 +0,0 @@
-/*
-Font definitions
-Font files are split by charset to optimize loading.
-
-Fonts used are from Google Fonts.
-*/
-
-/* Fraunces Italic - Latin extended */
-@font-face {
-	font-family: 'Fraunces';
-	font-style: italic;
-	font-weight: 100 900;
-	font-display: swap;
-	src: url('../../../../assets/fonts/fraunces-italic-latin-extended.woff2') format('woff2');
-	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* Fraunces Italic - Latin */
-@font-face {
-	font-family: 'Fraunces';
-	font-style: italic;
-	font-weight: 100 900;
-	font-display: swap;
-	src: url('../../../../assets/fonts/fraunces-italic-latin.woff2') format('woff2');
-	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* Fraunces - Latin extended */
-@font-face {
-	font-family: 'Fraunces';
-	font-style: normal;
-	font-weight: 100 900;
-	font-display: swap;
-	src: url('../../../../assets/fonts/fraunces-latin-extended.woff2') format('woff2');
-	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* Fraunces - Latin */
-@font-face {
-	font-family: 'Fraunces';
-	font-style: normal;
-	font-weight: 100 900;
-	font-display: swap;
-	src: url('../../../../assets/fonts/fraunces-latin.woff2') format('woff2');
-	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* Noto Sans Italic - Latin extended */
-@font-face {
-	font-family: 'Noto Sans';
-	font-style: italic;
-	font-weight: 100 900;
-	font-stretch: 62.5% 100%;
-	font-display: swap;
-	src: url('../../../../assets/fonts/noto-sans-italic-latin-extended.woff2') format('woff2');
-	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* Noto Sans Italic - Latin */
-@font-face {
-	font-family: 'Noto Sans';
-	font-style: italic;
-	font-weight: 100 900;
-	font-stretch: 62.5% 100%;
-	font-display: swap;
-	src: url('../../../../assets/fonts/noto-sans-italic-latin.woff2') format('woff2');
-	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* Noto Sans - Latin extended */
-@font-face {
-	font-family: 'Noto Sans';
-	font-style: normal;
-	font-weight: 100 900;
-	font-stretch: 62.5% 100%;
-	font-display: swap;
-	src: url('../../../../assets/fonts/noto-sans-latin-extended.woff2') format('woff2');
-	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* Noto Sans - Latin */
-@font-face {
-	font-family: 'Noto Sans';
-	font-style: normal;
-	font-weight: 100 900;
-	font-stretch: 62.5% 100%;
-	font-display: swap;
-	src: url('../../../../assets/fonts/noto-sans-latin.woff2') format('woff2');
-	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}

package/blocks/init/src/Blocks/assets/styles/tailwind.css

@@ -1,30 +0,0 @@
-/* stylelint-disable at-rule-no-unknown */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
-	.font-soft-0 {
-		font-variation-settings: 'SOFT' 0, 'WONK' 0;
-	}
-
-	.font-soft-25 {
-		font-variation-settings: 'SOFT' 25, 'WONK' 0;
-	}
-
-	.font-soft-50 {
-		font-variation-settings: 'SOFT' 50, 'WONK' 0;
-	}
-
-	.font-soft-100 {
-		font-variation-settings: 'SOFT' 100, 'WONK' 0;
-	}
-
-	.wp-admin-bar-offset {
-		@apply wp-logged-in-mobile:top-[46px] wp-logged-in:top-[32px];
-	}
-
-	.wp-admin-bar-pt {
-		@apply wp-logged-in-mobile:pt-[46px] wp-logged-in:pt-[32px];
-	}
-}

package/blocks/init/src/Blocks/components/admin-theme-options/admin-theme-options.php

@@ -1,20 +0,0 @@
-<?php
-
-/**
- * Theme options settings screen component template.
- *
- * @package %g_namespace%
- */
-
-use %g_namespace%\ThemeOptions\ThemeOptions;
-use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
-
-$manifest = Helpers::getManifestByDir(__DIR__);
-$patterns = wp_json_encode(ThemeOptions::getPatterns());
-?>
-
-<input type="hidden" id="es-pattern-data" value="<?php echo esc_attr($patterns); ?>">
-
-<div class="wrap" id="es-theme-options">
-	<?php echo esc_html__('Loading...', '%g_textdomain%'); ?>
-</div>

package/blocks/init/src/Blocks/components/admin-theme-options/assets-admin/index.js

@@ -1,36 +0,0 @@
-import domReady from '@wordpress/dom-ready';
-import { __ } from '@wordpress/i18n';
-import { createRoot } from '@wordpress/element';
-import { ThemeOptionsPage } from '@eightshift/frontend-libs-tailwind/scripts';
-import { Parts } from './pages/parts';
-import { Tabs, TabList, Tab, TabPanel } from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
-
-domReady(() => {
-	const rootElement = document.getElementById('es-theme-options');
-
-	if (!rootElement) {
-		return;
-	}
-
-	const root = createRoot(rootElement);
-	const patterns = JSON.parse(document.getElementById('es-pattern-data')?.value ?? '[]');
-
-	root.render(
-		<ThemeOptionsPage>
-			<Tabs>
-				<TabList>
-					<Tab
-						icon={icons.wrench}
-						label={__('Parts', '%g_textdomain%')}
-					/>
-				</TabList>
-				<TabPanel>
-					<Parts patterns={patterns} />
-				</TabPanel>
-			</Tabs>
-		</ThemeOptionsPage>,
-	);
-});
-
-// https://developer.wordpress.org/news/2024/03/26/how-to-use-wordpress-react-components-for-plugin-pages/

package/blocks/init/src/Blocks/components/admin-theme-options/assets-admin/pages/parts.js

@@ -1,56 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { Select, OptionsPanel, OptionsPanelSection, Spacer } from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
-import { useContext } from '@wordpress/element';
-import { EsThemeOptionsContext } from '@eightshift/frontend-libs-tailwind/scripts';
-
-export const Parts = ({ patterns }) => {
-	const { settings, updateSettings, isLoading } = useContext(EsThemeOptionsContext);
-
-	return (
-		<OptionsPanel>
-			<OptionsPanelSection>
-				<Select
-					label={__('Header', '%g_textdomain%')}
-					icon={icons.header}
-					value={settings?.header}
-					onChange={(value) => updateSettings({ header: value })}
-					options={patterns}
-					className='es-uic-w-48'
-					disabled={isLoading}
-					simpleValue
-					clearable
-					inline
-				/>
-
-				<Select
-					label={__('Footer', '%g_textdomain%')}
-					icon={icons.footer}
-					value={settings?.footer}
-					onChange={(value) => updateSettings({ footer: value })}
-					options={patterns}
-					className='es-uic-w-48'
-					disabled={isLoading}
-					simpleValue
-					clearable
-					inline
-				/>
-
-				<Spacer size='s' />
-
-				<Select
-					label={__('404 page', '%g_textdomain%')}
-					icon={icons.emptyCircle}
-					value={settings?.fourOhFour}
-					onChange={(value) => updateSettings({ fourOhFour: value })}
-					options={patterns}
-					className='es-uic-w-48'
-					disabled={isLoading}
-					simpleValue
-					clearable
-					inline
-				/>
-			</OptionsPanelSection>
-		</OptionsPanel>
-	);
-};

package/blocks/init/src/Blocks/components/admin-theme-options/manifest.json

@@ -1,5 +0,0 @@
-{
-	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
-	"componentName": "admin-theme-options",
-	"title": "Theme options"
-}

package/blocks/init/src/Blocks/components/button/assets/index.js

@@ -1,22 +0,0 @@
-import domReady from '@wordpress/dom-ready';
-
-domReady(() => {
-	const elements = document.querySelectorAll('.button[href^="#"]');
-
-	if (!elements.length) {
-		return;
-	}
-
-	elements.forEach((element) => {
-		element.addEventListener('click', (event) => {
-			event.preventDefault();
-			const target = document.querySelector(event.currentTarget.getAttribute('href'));
-
-			window.scrollTo({
-				top: target.offsetTop,
-				left: 0,
-				behavior: 'smooth',
-			});
-		});
-	});
-});

package/blocks/init/src/Blocks/components/button/button.php

@@ -1,88 +0,0 @@
-<?php
-
-/**
- * Button component template.
- *
- * @package %g_namespace%
- */
-
-use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
-
-$manifest = Helpers::getManifestByDir(__DIR__);
-
-$buttonUse = Helpers::checkAttr('buttonUse', $attributes, $manifest);
-
-if (!$buttonUse) {
-	return;
-}
-
-$additionalClass = $attributes['additionalClass'] ?? '';
-$additionalAttributes = $attributes['additionalAttributes'] ?? [];
-$buttonId = Helpers::checkAttr('buttonId', $attributes, $manifest);
-$buttonType = Helpers::checkAttr('buttonType', $attributes, $manifest);
-
-$buttonUrl = Helpers::checkAttr('buttonUrl', $attributes, $manifest);
-$buttonIsNewTab = Helpers::checkAttr('buttonIsNewTab', $attributes, $manifest);
-
-$buttonContent = Helpers::checkAttr('buttonContent', $attributes, $manifest);
-
-$buttonAriaLabel = Helpers::checkAttr('buttonAriaLabel', $attributes, $manifest);
-
-$buttonIconUse = Helpers::checkAttr('buttonIconUse', $attributes, $manifest);
-
-$buttonAttrs = [];
-
-if (!$buttonIconUse && empty($buttonContent)) {
-	return;
-}
-
-if (!empty($additionalAttributes)) {
-	$buttonAttrs = $additionalAttributes;
-}
-
-if (!empty($buttonUrl)) {
-	$buttonAttrs['href'] = $buttonUrl;
-}
-
-if ($buttonIsNewTab) {
-	$buttonAttrs['target'] = '_blank';
-	$buttonAttrs['rel'] = 'noopener noreferrer';
-}
-
-if (!empty($buttonId)) {
-	$buttonAttrs['id'] = $buttonId;
-}
-
-if (!empty($buttonAriaLabel)) {
-	$buttonAttrs['aria-label'] = $buttonAriaLabel;
-}
-
-$buttonAttrs['class'] = Helpers::tailwindClasses('base', $attributes, $manifest, 'button', $additionalClass);
-
-$buttonTag = !empty($buttonUrl) ? 'a' : 'button';
-
-if (empty($buttonUrl) && !empty($buttonType)) {
-	$buttonAttrs['type'] = $buttonType;
-}
-?>
-
-<<?php echo $buttonTag; // phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped ?>
-	<?php
-	foreach ($buttonAttrs as $key => $value) {
-		if (empty($key) && empty($value)) {
-			continue;
-		}
-
-		// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
-		echo "{$key}=" . '"' . esc_attr($value) . '"';
-	}
-	?>
->
-	<?php
-	echo Helpers::render('icon', Helpers::props('icon', $attributes));
-	?>
-
-	<?php if (!empty($buttonContent)) { ?>
-		<span><?php echo esc_html($buttonContent); ?></span>
-	<?php } ?>
-</<?php echo $buttonTag; // phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped ?>>

package/blocks/init/src/Blocks/components/button/components/button-editor.js

@@ -1,36 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { RichText } from '@wordpress/block-editor';
-import { checkAttr, getAttrKey, tailwindClasses, props } from '@eightshift/frontend-libs-tailwind/scripts';
-import { IconEditor } from '../../icon/components/icon-editor';
-import manifest from './../manifest.json';
-
-export const ButtonEditor = (attributes) => {
-	const { componentClass } = manifest;
-
-	const { setAttributes, additionalClass, placeholder = __('Add content', '%g_textdomain%') } = attributes;
-
-	const buttonContent = checkAttr('buttonContent', attributes, manifest);
-	const buttonUse = checkAttr('buttonUse', attributes, manifest);
-
-	if (!buttonUse) {
-		return null;
-	}
-
-	return (
-		<div className={tailwindClasses(attributes, manifest, additionalClass)}>
-			<IconEditor
-				{...props('icon', attributes, {
-					blockClass: componentClass,
-				})}
-			/>
-
-			<RichText
-				placeholder={placeholder}
-				value={buttonContent}
-				onChange={(value) => setAttributes({ [getAttrKey('buttonContent', attributes, manifest)]: value })}
-				keepPlaceholderOnFocus
-				allowedFormats={[]}
-			/>
-		</div>
-	);
-};

package/blocks/init/src/Blocks/components/button/components/button-options.js

@@ -1,134 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import {
-	getOption,
-	checkAttr,
-	getAttrKey,
-	props,
-	getOptions,
-	wpSearchRoute,
-	getHiddenOptions,
-} from '@eightshift/frontend-libs-tailwind/scripts';
-import { IconOptions } from '../../icon/components/icon-options';
-import {
-	ButtonGroup,
-	ColorPicker,
-	ComponentToggle,
-	HStack,
-	InputField,
-	LinkInput,
-	OptionSelect,
-	Spacer,
-	Toggle,
-} from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
-import { upperFirst } from '@eightshift/ui-components/utilities';
-import manifest from './../manifest.json';
-
-export const ButtonOptions = (attributes) => {
-	const { setAttributes, hideOptions, ...rest } = attributes;
-
-	const hiddenOptions = getHiddenOptions(hideOptions);
-
-	const buttonId = checkAttr('buttonId', attributes, manifest);
-	const buttonAriaLabel = checkAttr('buttonAriaLabel', attributes, manifest);
-	const buttonUrl = checkAttr('buttonUrl', attributes, manifest);
-	const buttonIsAnchor = checkAttr('buttonIsAnchor', attributes, manifest);
-	const buttonIsNewTab = checkAttr('buttonIsNewTab', attributes, manifest);
-	const buttonVariant = checkAttr('buttonVariant', attributes, manifest);
-	const buttonColor = checkAttr('buttonColor', attributes, manifest);
-	const buttonUse = checkAttr('buttonUse', attributes, manifest);
-
-	return (
-		<ComponentToggle
-			label={manifest.title}
-			icon={icons.buttonOutline}
-			onChange={(value) => setAttributes({ [getAttrKey('buttonUse', attributes, manifest)]: value })}
-			useComponent={buttonUse}
-			{...rest}
-		>
-			<HStack hidden={hiddenOptions?.variant && hiddenOptions?.color && hiddenOptions?.icon}>
-				<ButtonGroup hidden={hiddenOptions?.variant && hiddenOptions?.color}>
-					<OptionSelect
-						aria-label={__('Style', '%g_textdomain%')}
-						value={buttonVariant}
-						onChange={(value) => setAttributes({ [getAttrKey('buttonVariant', attributes, manifest)]: value })}
-						options={getOption('buttonVariant', attributes, manifest)}
-						type='menu'
-						hidden={hiddenOptions?.variant}
-					/>
-
-					<ColorPicker
-						aria-label={__('Color', '%g_textdomain%')}
-						value={buttonColor}
-						onChange={(value) => setAttributes({ [getAttrKey('buttonColor', attributes, manifest)]: value })}
-						colors={getOption(`buttonColor${upperFirst(buttonVariant)}`, attributes, manifest, true)}
-						hidden={hiddenOptions?.color}
-					/>
-				</ButtonGroup>
-
-				<IconOptions
-					{...props('icon', attributes, {
-						options: getOptions(attributes, manifest),
-					})}
-					hidden={hiddenOptions?.icon}
-					hideOptions='size'
-					design='compactLabel'
-				/>
-			</HStack>
-
-			<Spacer hidden={hiddenOptions?.link} />
-
-			<LinkInput
-				icon={buttonIsAnchor ? icons.globeAnchor : icons.globe}
-				url={buttonUrl}
-				onChange={({ url, isAnchor }) => {
-					setAttributes({
-						[getAttrKey('buttonUrl', attributes, manifest)]: url,
-						[getAttrKey('buttonIsAnchor', attributes, manifest)]: isAnchor ?? false,
-					});
-				}}
-				fetchSuggestions={wpSearchRoute}
-				hidden={hiddenOptions?.link}
-			/>
-
-			<Toggle
-				icon={icons.newTab}
-				label={__('Open in new tab', '%g_textdomain%')}
-				checked={buttonIsNewTab}
-				onChange={(value) => setAttributes({ [getAttrKey('buttonIsNewTab', attributes, manifest)]: value })}
-				hidden={hiddenOptions?.link || hiddenOptions?.newTab}
-			/>
-
-			<Spacer hidden={hiddenOptions?.ariaLabel} />
-			<Spacer
-				icon={icons.a11y}
-				text={__('Accessibility', '%g_textdomain%')}
-				border
-				hidden={hiddenOptions?.ariaLabel}
-			/>
-			<InputField
-				icon={icons.ariaLabel}
-				label={__('ARIA label', '%g_textdomain%')}
-				value={buttonAriaLabel}
-				onChange={(value) => setAttributes({ [getAttrKey('buttonAriaLabel', attributes, manifest)]: value })}
-				help={__('Description of the button.', '%g_textdomain%')}
-				hidden={hiddenOptions?.ariaLabel}
-			/>
-
-			<Spacer hidden={hiddenOptions?.uniqueId} />
-			<Spacer
-				icon={icons.pointerHand}
-				text={__('Advanced', '%g_textdomain%')}
-				border
-				hidden={hiddenOptions?.uniqueId}
-			/>
-			<InputField
-				icon={icons.id}
-				label={__('Unique identifier', '%g_textdomain%')}
-				value={buttonId}
-				onChange={(value) => setAttributes({ [getAttrKey('buttonId', attributes, manifest)]: value })}
-				hidden={hiddenOptions?.uniqueId}
-			/>
-		</ComponentToggle>
-	);
-};