From 869bb4140d375540ea88f7cbc97901f4ae9435d4 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 2 Feb 2024 01:59:27 +0300
Subject: [PATCH] Update roadmap

---
 .../pages/roadmap/roadmap.component.html      | 166 ++++++++----------
 1 file changed, 76 insertions(+), 90 deletions(-)

diff --git a/src/app/showcase/pages/roadmap/roadmap.component.html b/src/app/showcase/pages/roadmap/roadmap.component.html
index 967465a6a7c..c3dc65c67a9 100644
--- a/src/app/showcase/pages/roadmap/roadmap.component.html
+++ b/src/app/showcase/pages/roadmap/roadmap.component.html
@@ -2,11 +2,8 @@
     <div class="doc-intro">
         <h1>Roadmap</h1>
         <p>
-            At <a href="https://www.primetek.com.tr/" class="text-primary font-medium hover:underline">PrimeTek</a>, we
-            are passionate about improving PrimeNG and
-            would like to share our ideas for 2023 with the community. These are planned to be implemented in
-            parallel to the regular maintenance work of the library involving review of issue tickets, PRs and PrimeNG
-            PRO support.
+            At <a href="https://www.primetek.com.tr/" class="text-primary font-medium hover:underline">PrimeTek</a>, we are passionate about improving PrimeNG and would like to share our ideas for 2024 with the community. These are planned to be
+            implemented in parallel to the regular maintenance work of the library involving review of issue tickets, PRs and PrimeNG PRO support.
         </p>
     </div>
 
@@ -21,182 +18,171 @@ <h1>Roadmap</h1>
             </div>
             <div class="flex flex-column gap-3">
                 <div class="flex gap-3 border-bottom-1 surface-border pb-3">
-                    <div
-                        class="flex-shrink-0 p-3 bg-blue-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">
-                        COMPONENTS</div>
+                    <div class="flex-shrink-0 p-3 bg-blue-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">COMPONENTS</div>
                     <div class="flex-1 flex gap-3 flex-column">
                         <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
-                            <h2 class="text-lg font-bold mt-0 mb-2">Typings</h2>
-                            <p class="mt-0 mb-3 line-height-3">Improve codebase to utilize more strict types.</p>
+                            <h2 class="text-lg font-bold mt-0 mb-2">Unstyled Mode</h2>
+                            <p class="mt-0 mb-3 line-height-3">Initiate unstyled mode for a set of components.</p>
                             <div class="surface-200 border-round">
-                                <div class="bg-blue-500 border-round" style="width: 100%; height: 4px"></div>
+                                <div class="bg-blue-500 border-round" style="width: 10%; height: 4px"></div>
                             </div>
                         </div>
-                    </div>
-                    <div class="flex-1 flex gap-3 flex-column">
                         <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
-                            <h2 class="text-lg font-bold mt-0 mb-2">Accessibility - I</h2>
-                            <p class="mt-0 mb-3 line-height-3">Initiate WCAG Level AA compliance using PrimeVue as the
-                                reference implementation.</p>
-                            <div class="surface-200 border-round">
-                                <div class="bg-blue-500 border-round" style="width: 100%; height: 4px"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="flex-1 flex gap-3 flex-column">
-                        <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
-                            <h2 class="text-lg font-bold mt-0 mb-2">Accessibility - II</h2>
-                            <p class="mt-0 mb-3 line-height-3">Finalize WCAG Level AA compliance for all components with
-                                screen reader and keyboard support based on community feedback and audit tools.</p>
+                            <h2 class="text-lg font-bold mt-0 mb-2">Pass Through Props</h2>
+                            <p class="mt-0 mb-3 line-height-3">Implement pass through properties for a set of components.</p>
                             <div class="surface-200 border-round">
-                                <div class="bg-blue-500 border-round" style="width: 90%; height: 4px"></div>
+                                <div class="bg-blue-500 border-round" style="width: 10%; height: 4px"></div>
                             </div>
                         </div>
                         <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
-                            <h2 class="text-lg font-bold mt-0 mb-2">New Design Tokens</h2>
-                            <p class="mt-0 mb-3 line-height-3">Introduce new design tokens for styled mode.</p>
+                            <h2 class="text-lg font-bold mt-0 mb-2">New Components</h2>
+                            <p class="mt-0 mb-3 line-height-3">Layout, Typography, MeterGroup, Drawer, Stepper...</p>
                             <div class="surface-200 border-round">
-                                <div class="bg-blue-500 border-round" style="width: 90%; height: 4px"></div>
+                                <div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
                             </div>
                         </div>
                     </div>
                     <div class="flex-1 flex gap-3 flex-column">
                         <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
-                            <h2 class="text-lg font-bold mt-0 mb-2">CSS Variables</h2>
-                            <p class="mt-0 mb-3 line-height-3">Implement design tokens as CSS variables instead of SCSS.
-                            </p>
+                            <h2 class="text-lg font-bold mt-0 mb-2">New Styled Mode</h2>
+                            <p class="mt-0 mb-3 line-height-3">Move theming into core to replace sass repo..</p>
                             <div class="surface-200 border-round">
                                 <div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
                             </div>
                         </div>
                         <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
-                            <h2 class="text-lg font-bold mt-0 mb-2">New Styled Mode</h2>
-                            <p class="mt-0 mb-3 line-height-3">Move theming into core to replace external sass repo.</p>
+                            <h2 class="text-lg font-bold mt-0 mb-2">CSS Variables</h2>
+                            <p class="mt-0 mb-3 line-height-3">Implement figma design tokens as CSS variables instead of SCSS.</p>
                             <div class="surface-200 border-round">
                                 <div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
                             </div>
                         </div>
                         <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
-                            <h2 class="text-lg font-bold mt-0 mb-2">Pass Through Props</h2>
-                            <p class="mt-0 mb-3 line-height-3"> Initate the implementation of Pass Through Props to
-                                provide advanced control over component internals.</p>
+                            <h2 class="text-lg font-bold mt-0 mb-2">RTL Mode</h2>
+                            <p class="mt-0 mb-3 line-height-3">RTL support for the UI components.</p>
                             <div class="surface-200 border-round">
                                 <div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
                             </div>
                         </div>
+                    </div>
+                    <div class="flex-1 flex gap-3 flex-column">
                         <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
-                            <h2 class="text-lg font-bold mt-0 mb-2">Unstyled Mode</h2>
-                            <p class="mt-0 mb-3 line-height-3">Implementation of the Unstyled Mode to support libraries
-                                like Tailwind.</p>
+                            <h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
+                            <p class="mt-0 mb-3 line-height-3">Sheet, Event Calendar.</p>
                             <div class="surface-200 border-round">
                                 <div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <div class="flex gap-3 border-bottom-1 surface-border pb-3">
-                    <div
-                        class="flex-shrink-0 p-3 bg-indigo-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">
-                        Figma UI Kit</div>
-                    <div class="flex-1 flex gap-3 flex-column"></div>
                     <div class="flex-1 flex gap-3 flex-column">
-                        <div class="p-3 surface-card border-round border-indigo-500" style="border-left: 6px solid">
-                            <h2 class="text-lg font-bold mt-0 mb-2">Tokens</h2>
-                            <p class="mt-0 mb-3 line-height-3">Initiated support for Figma Tokens.</p>
+                        <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                            <h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
+                            <p class="mt-0 mb-3 line-height-3">Gantt Chart, Flow Chart.</p>
                             <div class="surface-200 border-round">
-                                <div class="bg-indigo-500 border-round" style="width: 100%; height: 4px"></div>
+                                <div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
                             </div>
                         </div>
                     </div>
+                </div>
+                <div class="flex gap-3 border-bottom-1 surface-border pb-3">
+                    <div class="flex-shrink-0 p-3 bg-indigo-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">FIGMA UI Kit</div>
                     <div class="flex-1 flex gap-3 flex-column">
                         <div class="p-3 surface-card border-round border-indigo-500" style="border-left: 6px solid">
-                            <h2 class="text-lg font-bold mt-0 mb-2">Tokens</h2>
-                            <p class="mt-0 mb-3 line-height-3">Initial release of Figma Tokens.</p>
+                            <h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens</h2>
+                            <p class="mt-0 mb-3 line-height-3">Design tokens to sync with the new styled mode.</p>
                             <div class="surface-200 border-round">
-                                <div class="bg-indigo-500 border-round" style="width: 100%; height: 4px"></div>
+                                <div class="bg-indigo-500 border-round" style="width: 20%; height: 4px"></div>
                             </div>
                         </div>
                     </div>
                     <div class="flex-1 flex gap-3 flex-column">
                         <div class="p-3 surface-card border-round border-indigo-500" style="border-left: 6px solid">
-                            <h2 class="text-lg font-bold mt-0 mb-2">Tokens</h2>
-                            <p class="mt-0 mb-3 line-height-3">Sync new design tokens.</p>
+                            <h2 class="text-lg font-bold mt-0 mb-2">Figma to Theme API</h2>
+                            <p class="mt-0 mb-3 line-height-3">Build the infrastructure to generate themes from Figma.</p>
                             <div class="surface-200 border-round">
                                 <div class="bg-indigo-500 border-round" style="width: 0%; height: 4px"></div>
                             </div>
                         </div>
                     </div>
+                    <div class="flex-1 flex gap-3 flex-column"></div>
+                    <div class="flex-1 flex gap-3 flex-column"></div>
                 </div>
                 <div class="flex gap-3 border-bottom-1 surface-border pb-3">
-                    <div
-                        class="flex-shrink-0 p-3 bg-teal-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">
-                        SHOWCASE</div>
-                    <div class="flex-1 flex gap-3 flex-column">
-                        <div class="p-3 surface-card border-round border-teal-500" style="border-left: 6px solid">
-                            <h2 class="text-lg font-bold mt-0 mb-2">Demos</h2>
-                            <p class="mt-0 mb-3 line-height-3">Standalone demos for each component feature instead
-                                of one demo page that demonstrates multiple features.</p>
-                            <div class="surface-200 border-round">
-                                <div class="bg-teal-500 border-round" style="width: 100%; height: 4px"></div>
-                            </div>
-                        </div>
-                    </div>
+                    <div class="flex-shrink-0 p-3 bg-teal-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">SHOWCASE</div>
                     <div class="flex-1 flex gap-3 flex-column">
                         <div class="p-3 surface-card border-round border-teal-500" style="border-left: 6px solid">
                             <h2 class="text-lg font-bold mt-0 mb-2">Documentation</h2>
-                            <p class="mt-0 mb-3 line-height-3">New component API docs generated by TSDoc.</p>
+                            <p class="mt-0 mb-3 line-height-3">Add new demos and documentation.</p>
                             <div class="surface-200 border-round">
-                                <div class="bg-teal-500 border-round" style="width: 100%; height: 4px"></div>
+                                <div class="bg-teal-500 border-round" style="width: 10%; height: 4px"></div>
                             </div>
                         </div>
                     </div>
                     <div class="flex-1 flex gap-3 flex-column"></div>
                     <div class="flex-1 flex gap-3 flex-column"></div>
+                    <div class="flex-1 flex gap-3 flex-column"></div>
                 </div>
                 <div class="flex gap-3 border-bottom-1 surface-border pb-3">
-                    <div
-                        class="flex-shrink-0 p-3 bg-orange-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">
-                        PrimeBlocks</div>
-                    <div class="flex-1 flex gap-3 flex-column"></div>
-                    <div class="flex-1 flex gap-3 flex-column"></div>
-                    <div class="flex-1 flex gap-3 flex-column"></div>
+                    <div class="flex-shrink-0 p-3 bg-orange-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">PRIMEBLOCKS</div>
                     <div class="flex-1 flex gap-3 flex-column">
                         <div class="p-3 surface-card border-round border-orange-500" style="border-left: 6px solid">
                             <h2 class="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
-                            <p class="mt-0 mb-3 line-height-3">More UI Blocks.</p>
+                            <p class="mt-0 mb-3 line-height-3">Create new blocks.</p>
+                            <div class="surface-200 border-round">
+                                <div class="bg-orange-500 border-round" style="width: 50%; height: 4px"></div>
+                            </div>
+                        </div>
+                        <div class="p-3 surface-card border-round border-orange-500" style="border-left: 6px solid">
+                            <h2 class="text-lg font-bold mt-0 mb-2">Blocks Website</h2>
+                            <p class="mt-0 mb-3 line-height-3">New design for blocks application</p>
+                            <div class="surface-200 border-round">
+                                <div class="bg-orange-500 border-round" style="width: 50%; height: 4px"></div>
+                            </div>
+                        </div>
+                        <div class="p-3 surface-card border-round border-orange-500" style="border-left: 6px solid">
+                            <h2 class="text-lg font-bold mt-0 mb-2">Tailwind Blocks</h2>
+                            <p class="mt-0 mb-3 line-height-3">Port the entire Blocks to Tailwind.</p>
                             <div class="surface-200 border-round">
                                 <div class="bg-orange-500 border-round" style="width: 0%; height: 4px"></div>
                             </div>
                         </div>
                     </div>
+                    <div class="flex-1 flex gap-3 flex-column">
+                        <div class="p-3 surface-card border-round border-orange-500" style="border-left: 6px solid">
+                            <h2 class="text-lg font-bold mt-0 mb-2">Online App</h2>
+                            <p class="mt-0 mb-3 line-height-3">Implement a SaaS app to access the blocks instead of an offline download.</p>
+                            <div class="surface-200 border-round">
+                                <div class="bg-orange-500 border-round" style="width: 0%; height: 4px"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex-1 flex gap-3 flex-column"></div>
+                    <div class="flex-1 flex gap-3 flex-column"></div>
                 </div>
                 <div class="flex gap-3 border-bottom-1 surface-border pb-3">
-                    <div
-                        class="flex-shrink-0 p-3 bg-pink-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">
-                        Designer</div>
+                    <div class="flex-shrink-0 p-3 bg-pink-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">DESIGN</div>
                     <div class="flex-1 flex gap-3 flex-column">
                         <div class="p-3 surface-card border-round border-pink-500" style="border-left: 6px solid">
-                            <h2 class="text-lg font-bold mt-0 mb-2">Open Source Designer</h2>
-                            <p class="mt-0 mb-3 line-height-3">Open source theme designer to make it free to use.</p>
+                            <h2 class="text-lg font-bold mt-0 mb-2">Aura UI Theme</h2>
+                            <p class="mt-0 mb-3 line-height-3">Brand new default theme with a modern and attractive design.</p>
                             <div class="surface-200 border-round">
-                                <div class="bg-pink-500 border-round" style="width: 100%; height: 4px"></div>
+                                <div class="bg-pink-500 border-round" style="width: 80%; height: 4px"></div>
                             </div>
                         </div>
                     </div>
-                    <div class="flex-1 flex gap-3 flex-column"></div>
-                    <div class="flex-1 flex gap-3 flex-column"></div>
                     <div class="flex-1 flex gap-3 flex-column">
                         <div class="p-3 surface-card border-round border-pink-500" style="border-left: 6px solid">
-                            <h2 class="text-lg font-bold mt-0 mb-2">New UI Based Theme Editor</h2>
-                            <p class="mt-0 mb-3 line-height-3">Advanced Theme Editor with full control over the Theming
-                                API.</p>
+                            <h2 class="text-lg font-bold mt-0 mb-2">Theme Editor</h2>
+                            <p class="mt-0 mb-3 line-height-3">Advanced Theme Editor App with full control over the new Styled Theming API.</p>
                             <div class="surface-200 border-round">
                                 <div class="bg-pink-500 border-round" style="width: 0%; height: 4px"></div>
                             </div>
                         </div>
                     </div>
+                    <div class="flex-1 flex gap-3 flex-column"></div>
+                    <div class="flex-1 flex gap-3 flex-column"></div>
                 </div>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>