Merge pull request #369 from infinum/feature/uic-docs-update

Docs update

Author: goranalkovic-infinum

website/bun.lock

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/docs",
-	"version": "9.1.1",
+	"version": "9.2.0",
 	"description": "A documentation website for Eightshift open source projects.",
 	"author": {
 		"name": "Eightshift team",
@@ -32,12 +32,12 @@
 		"clear": "docusaurus clear"
 	},
 	"dependencies": {
-		"@docusaurus/core": "^3.7.0",
-		"@docusaurus/preset-classic": "^3.7.0",
-		"@eightshift/ui-components": "^3.0.1",
+		"@docusaurus/core": "^3.8.1",
+		"@docusaurus/preset-classic": "^3.8.1",
+		"@eightshift/ui-components": "^5.1.1",
 		"@infinum/docusaurus-theme": "^0.5.0",
 		"@mdx-js/react": "^3.1.0",
-		"@wp-playground/client": "^1.0.28",
+		"@wp-playground/client": "^1.2.1",
 		"clsx": "^2.1.1",
 		"es-text-loader": "file:plugins/es-text-loader",
 		"prism-react-renderer": "^2.4.1",

website/package.json

@@ -48,6 +48,7 @@ module.exports = {
 						'es-ui-components/tabs',
 						'es-ui-components/repeater',
 						'es-ui-components/draggable-list',
+						'es-ui-components/draggable',
 					],
 				},
 				{
@@ -57,6 +58,7 @@ module.exports = {
 						'es-ui-components/triggered-popover',
 						'es-ui-components/animated-visibility',
 						'es-ui-components/expandable',
+						'es-ui-components/modal',
 					],
 				},
 				{
@@ -72,6 +74,7 @@ module.exports = {
 					type: 'category',
 					label: 'Selection',
 					items: [
+						'es-ui-components/option-select',
 						'es-ui-components/column-config-slider',
 						'es-ui-components/matrix-align',
 						{

website/sidebars-components.js

@@ -92,8 +92,8 @@ export default function Home() {
 						subtitle: 'Eightshift Development kit comes with Webpack pre-configured, so you can start building your JavaScript and CSS assets from the start. Vendor prefixes? Polyfills? SCSS compilation? Asset minification? All taken care of!'
 					},
 					{
-						title: 'First-class CSS variables',
-						subtitle: 'Forget about conditional classnames: build out CSS variables from attribute values and scope them to a particular block with almost no code.'
+						title: 'First-class Tailwind support',
+						subtitle: 'Speed up your development with Tailwind helpers that make it easy to build out classnames based on block attributes.'
 					},
 					{
 						title: 'Cache busting',
@@ -104,7 +104,7 @@ export default function Home() {
 						subtitle: 'Object-oriented programming is at the core of Eightshift Development kit, making your projects cleaner and allowing you to extend and replace functionality.'
 					},
 					{
-						title: 'Eightshift Frontend Libs',
+						title: 'Eightshift Frontend Libs Tailwind',
 						subtitle: 'A collection of useful front-end utility modules and all the tools you need to start building modern Block Editor dynamic blocks.'
 					}
 				]}

website/src/pages/index.js

@@ -15,7 +15,7 @@ export default function Showcase() {
 			keywords={siteConfig.customFields.keywords}
 			metaImage={useBaseUrl(`img/${siteConfig.customFields.image}`)}
 		>
-			<ShowcaseGrid privateType={true}/>
+			<ShowcaseGrid privateType />
 		</Layout>
 	);
 };

website/src/pages/showcase-infinum.js

@@ -2,6 +2,11 @@ import React from 'react';
 import { IconLinkCards, osProjectIcons } from '@infinum/docusaurus-theme';
 
 export const EsOpenSource = (props) => {
+
+	const frontendLibsTwIcon = (
+		<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' fill='none'><path d='M44.11 14v15.36h15.35' stroke='#D92327' strokeWidth='4' strokeMiterlimit='10' strokeLinecap='square' fill='none'/><path d='M60.46 66.75H19V13h26.11l15.35 15.36v38.39Z' stroke='#D92327' strokeWidth='4' strokeMiterlimit='10' strokeLinecap='square' fill='none'/><path clip-rule='evenodd' fillRule='evenodd' d='M39.28 42c-3.275 0-5.322 1.592-6.14 4.776 1.227-1.592 2.66-2.19 4.297-1.791.934.226 1.602.885 2.34 1.615 1.205 1.188 2.599 2.563 5.642 2.563 3.274 0 5.32-1.592 6.14-4.775-1.228 1.592-2.661 2.188-4.298 1.79-.935-.227-1.603-.886-2.341-1.615C43.716 43.374 42.323 42 39.28 42Zm-6.14 7.163c-3.275 0-5.321 1.592-6.14 4.775 1.228-1.592 2.66-2.188 4.297-1.79.935.226 1.603.885 2.341 1.615 1.205 1.188 2.598 2.563 5.641 2.563 3.274 0 5.321-1.592 6.14-4.776-1.228 1.592-2.66 2.19-4.298 1.792-.934-.228-1.602-.887-2.34-1.616-1.205-1.188-2.598-2.563-5.642-2.563Z' fill='#D92327' stroke='#D92327' strokeMiterlimit='3.8637' strokeLinejoin='bevel'/></svg>
+	);
+
 	return (
 		<IconLinkCards
 			{...props}
@@ -23,9 +28,14 @@ export const EsOpenSource = (props) => {
 					text: 'Eightshift Libs',
 					url: 'https://github.com/infinum/eightshift-libs'
 				},
+				{
+					icon: frontendLibsTwIcon,
+					text: 'Eightshift Frontend Libs (Tailwind)',
+					url: 'https://github.com/infinum/eightshift-frontend-libs-tailwind'
+				},
 				{
 					icon: osProjectIcons.eightshiftFrontendLibs,
-					text: 'Eightshift Frontend Libs',
+					text: 'Eightshift Frontend Libs (legacy)',
 					url: 'https://github.com/infinum/eightshift-frontend-libs'
 				},
 				{

website/src/theme/sections/os-projects.jsx

@@ -19,30 +19,6 @@ export default function ShowcaseGrid(props) {
 	const ctaUrl = privateType ? 'https://infinum.com/contact/' : 'https://github.com/infinum/eightshift-docs/issues';
 
 	const privateData = [
-		{
-			image: useBaseUrl('img/showcase/tarisio.webp'),
-			label: 'Tarisio',
-			desc: 'Tarisio is a web-based auction house specializing in stringed instruments and bows. Its online auctions provide a global marketplace for fine violin sales.',
-			link: 'https://tarisio.com/',
-		},
-		{
-			image: useBaseUrl('img/showcase/t2.webp'),
-			label: 'T2 auctions',
-			desc: 'Auctions for the Violin Trade.',
-			link: 'https://t2-auctions.com/',
-		},
-		{
-			image: useBaseUrl('img/showcase/rasco.webp'),
-			label: 'Rasco',
-			desc: 'One of the leading manufacturers of municipal equipment in Europe: we produce snow ploughs (snowplow), spreaders, crane mowers and vehicle upgrades.',
-			link: 'https://rasco.hr/',
-		},
-		{
-			image: useBaseUrl('img/showcase/lynx.webp'),
-			label: 'Lynx',
-			desc: 'LYNX is a 2m³ vacuum road sweeper exceeding expectations. Modern design, functionality, power and ease of use for clean streets.',
-			link: 'https://lynx.rasco.hr/',
-		},
 		{
 			image: useBaseUrl('img/showcase/hak.webp'),
 			label: 'HAK Revija',
@@ -55,18 +31,6 @@ export default function ShowcaseGrid(props) {
 			desc: 'Our mission is to restore the feeling of joy, happiness and optimism in difficult life circumstances.',
 			link: 'https://www.crveninosovi.hr/',
 		},
-		{
-			image: useBaseUrl('img/showcase/vcfa.webp'),
-			label: 'VCFA',
-			desc: 'Learn with accomplished teachers and artistic colleagues from around the world. You’ll create new work, refine your vision, and enhance your critical and creative skills.',
-			link: 'https://vcfa.edu/',
-		},
-		{
-			image: useBaseUrl('img/showcase/go.webp'),
-			label: 'Malta Go',
-			desc: 'GO is Malta’s leading communications services company. As the first quad play provider in Malta we provide mobile, fixed line, internet and TV services to more than 500,000 customers.',
-			link: 'https://www.go.com.mt/',
-		},
 	];
 
 	const publicData = [
@@ -94,12 +58,6 @@ export default function ShowcaseGrid(props) {
 			desc: 'Learn how to build apps. For free. No practical experience? No problem. People who build apps every day are teaching how to create software from scratch. By the end of the course, you will have built your very own app.',
 			link: 'https://academy.infinum.com/',
 		},
-		{
-			image: useBaseUrl('img/showcase/raise-the-bar.webp'),
-			label: 'Raise The Bar',
-			desc: 'Coca-Cola HBC is helps to align the skills and knowledge in tourism and hospitality through Raise the Bar education program.',
-			link: 'https://raisethebar.hr/',
-		},
 		{
 			image: useBaseUrl('img/showcase/d66.webp'),
 			label: 'D66',
@@ -108,7 +66,7 @@ export default function ShowcaseGrid(props) {
 		},
 		{
 			image: useBaseUrl('img/showcase/tvornica-snova.webp'),
-			label: 'Tvornica Snova',
+			label: 'Tvornica snova',
 			desc: 'Personalized books will allow each child to become the protagonist of their own story.',
 			link: 'https://tvornicasnova.hr/',
 		},
@@ -136,18 +94,6 @@ export default function ShowcaseGrid(props) {
 			desc: 'Welcome to the UK Safer Internet Centre, where you can find online safety tips, advice and resources to help children and young people stay safe online.',
 			link: 'https://saferinternet.org.uk/',
 		},
-		{
-			image: useBaseUrl('img/showcase/greenwichvillage.webp'),
-			label: 'Greenwich Village',
-			desc: 'The Village Alliance has been a leading advocate for the Greenwich Village community for nearly thirty years.',
-			link: 'https://greenwichvillage.nyc/',
-		},
-		{
-			image: useBaseUrl('img/showcase/biller.webp'),
-			label: 'Biller',
-			desc: 'Let\'s make buying easier, by empowering your business buyers to use Buy Now, Pay Later. Add Biller to your checkout and watch your conversion increase.',
-			link: 'https://biller.ai/',
-		},
 		{
 			image: useBaseUrl('img/showcase/dept.webp'),
 			label: 'DEPT®',

website/src/theme/sections/showcase-grid/showcase-grid.js

@@ -79,3 +79,8 @@
 .esd-space-v > :not(:last-child) {
 	margin-bottom: 0.625rem !important;
 }
+
+.esd-btn-custom {
+	height: auto !important;
+	padding: 0.5rem 1rem !important;
+}