mypgs 2.1.0 → 3.0.0

package/templates/html/components/formAddon.html

@@ -1,72 +0,0 @@
-<!--
-/**
- * @title Form Add-ons
- * @description Additional form controls for selectable cards, two-state buttons, switches, and compact chip groups.
- *
- * @pgs
- * - checkboxBackground: presents a checkbox as a selectable container with a highlighted checked state.
- * - twoState: presents checkbox or radio labels as buttons whose appearance changes when selected.
- * - toggle: presents a checkbox as a switch with a rail and movable thumb.
- * - chips: groups twoState controls into a compact segmented selector.
- *
- * @related
- * - flexColumnElements: vertically arranges the form add-on examples.
- * - flexColumnTexts: groups each example with its heading and control.
- *
- * @return HTML examples of the checkboxBackground, twoState, toggle, and chips form controls using native checkbox and radio inputs.
- */
--->
-
-<div pgs="flexColumnElements">
-    <section pgs="flexColumnTexts">
-        <strong>Checkbox with background</strong>
-
-        <label pgs="checkboxBackground">
-            <input type="checkbox" name="notifications" value="enabled">
-            <span>
-                <strong>Enable notifications</strong><br>
-                Receive important account updates.
-            </span>
-        </label>
-    </section>
-
-    <section pgs="flexColumnTexts">
-        <strong>Two-state controls</strong>
-
-        <label pgs="twoState">
-            <input type="checkbox" name="favorite" value="yes">
-            <i class="fa-solid fa-star" aria-hidden="true"></i>
-            Add to favorites
-        </label>
-    </section>
-
-    <section pgs="flexColumnTexts">
-        <strong>Toggle</strong>
-
-        <label pgs="toggle">
-            <span>Enable dark mode</span>
-            <input type="checkbox" name="darkMode" value="enabled">
-        </label>
-    </section>
-
-    <section pgs="flexColumnTexts">
-        <strong>Chips</strong>
-
-        <div pgs="chips" role="group" aria-label="Select a plan">
-            <label pgs="twoState">
-                <input type="radio" name="plan" value="basic" checked>
-                Basic
-            </label>
-
-            <label pgs="twoState">
-                <input type="radio" name="plan" value="pro">
-                Pro
-            </label>
-
-            <label pgs="twoState">
-                <input type="radio" name="plan" value="enterprise">
-                Enterprise
-            </label>
-        </div>
-    </section>
-</div>

package/templates/html/layout/flex.html

@@ -1,109 +0,0 @@
-<!--
-/**
- * @title Flex
- * @description Flex markup, configuration, behavior, and usage example.
- *
- * @pgs
- * - flex-2: identifies the flex-2 element used by Flex.
- * - flex-3: identifies the flex-3 element used by Flex.
- * - flex-4: identifies the flex-4 element used by Flex.
- * - flex-6: identifies the flex-6 element used by Flex.
- *
- * @related
- * - container: defines the container context for the introduction.
- * - flexColumnTexts: vertically organizes and spaces card text and content.
- * - card: makes the demonstration cells of the flex layout visible.
- *
- * @return HTML collection of responsive flex layouts with two, three, four, and six items.
- */
--->
-
-<div pgs="container flexColumnTexts">
-    <strong>Standard section</strong>
-    <p>Centered content inside a MyPGS section.</p>
-</div>
-
-
-<div pgs="flex-2">
-    <article pgs="card flexColumnTexts">
-        <strong>Column one</strong>
-        <p>First column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column two</strong>
-        <p>Second column content.</p>
-    </article>
-</div>
-
-
-<div pgs="flex-3">
-    <article pgs="card flexColumnTexts">
-        <strong>Column one</strong>
-        <p>First column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column two</strong>
-        <p>Second column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column three</strong>
-        <p>Third column content.</p>
-    </article>
-</div>
-
-
-<div pgs="flex-4">
-    <article pgs="card flexColumnTexts">
-        <strong>Column one</strong>
-        <p>First column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column two</strong>
-        <p>Second column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column three</strong>
-        <p>Third column content.</p>
-    </article>
-    <article pgs="card flexColumnTexts">
-        <strong>Column four</strong>
-        <p>Fourth column content.</p>
-    </article>
-</div>
-
-<div pgs="flex-6">
-    <article pgs="card flexColumnTexts">
-        <strong>Column one</strong>
-        <p>First column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column two</strong>
-        <p>Second column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column three</strong>
-        <p>Third column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column four</strong>
-        <p>Fourth column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column five</strong>
-        <p>Fifth column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column six</strong>
-        <p>Sixth column content.</p>
-    </article>
-</div

package/templates/html/layout/grid.html

@@ -1,109 +0,0 @@
-<!--
-/**
- * @title Grid
- * @description Responsive grid examples that distribute two to six columns while preserving design-system gaps and sizing.
- *
- * @pgs
- * - grid-2: creates a responsive grid with up to two columns.
- * - grid-3: creates a responsive grid with up to three columns.
- * - grid-4: creates a responsive grid with up to four columns.
- * - grid-6: creates a responsive grid with up to six columns.
- *
- * @related
- * - container: defines the container context for the introduction.
- * - flexColumnTexts: organizes and spaces introductory and card text.
- * - card: makes the demonstration grid cells visible.
- *
- * @return HTML collection of responsive grids with two, three, four, and six columns.
- */
--->
-
-<div pgs="container flexColumnTexts">
-    <strong>Standard section</strong>
-    <p>Centered content inside a MyPGS section.</p>
-</div>
-
-
-<div pgs="grid-2">
-    <article pgs="card flexColumnTexts">
-        <strong>Column one</strong>
-        <p>First column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column two</strong>
-        <p>Second column content.</p>
-    </article>
-</div>
-
-
-<div pgs="grid-3">
-    <article pgs="card flexColumnTexts">
-        <strong>Column one</strong>
-        <p>First column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column two</strong>
-        <p>Second column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column three</strong>
-        <p>Third column content.</p>
-    </article>
-</div>
-
-
-<div pgs="grid-4">
-    <article pgs="card flexColumnTexts">
-        <strong>Column one</strong>
-        <p>First column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column two</strong>
-        <p>Second column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column three</strong>
-        <p>Third column content.</p>
-    </article>
-    <article pgs="card flexColumnTexts">
-        <strong>Column four</strong>
-        <p>Fourth column content.</p>
-    </article>
-</div>
-
-<div pgs="grid-6">
-    <article pgs="card flexColumnTexts">
-        <strong>Column one</strong>
-        <p>First column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column two</strong>
-        <p>Second column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column three</strong>
-        <p>Third column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column four</strong>
-        <p>Fourth column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column five</strong>
-        <p>Fifth column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column six</strong>
-        <p>Sixth column content.</p>
-    </article>
-</div

package/templates/react/layout/flex.jsx

@@ -1,36 +0,0 @@
-const columns = [
-    ["Column one", "First column content."],
-    ["Column two", "Second column content."],
-    ["Column three", "Third column content."],
-    ["Column four", "Fourth column content."],
-    ["Column five", "Fifth column content."],
-    ["Column six", "Sixth column content."],
-];
-
-function ColumnCard({ title, text }) {
-    return (
-        <article pgs="card flexColumnTexts">
-            <strong>{title}</strong>
-            <p>{text}</p>
-        </article>
-    );
-}
-
-export default function Flex() {
-    return (
-        <>
-            <div pgs="container flexColumnTexts">
-                <strong>Standard section</strong>
-                <p>Centered content inside a MyPGS section.</p>
-            </div>
-
-            {[2, 3, 4, 6].map((count) => (
-                <div key={count} pgs={`flex-${count}`}>
-                    {columns.slice(0, count).map(([title, text]) => (
-                        <ColumnCard key={title} title={title} text={text} />
-                    ))}
-                </div>
-            ))}
-        </>
-    );
-}

package/templates/react/layout/grid.jsx

@@ -1,36 +0,0 @@
-const columns = [
-    ["Column one", "First column content."],
-    ["Column two", "Second column content."],
-    ["Column three", "Third column content."],
-    ["Column four", "Fourth column content."],
-    ["Column five", "Fifth column content."],
-    ["Column six", "Sixth column content."],
-];
-
-function ColumnCard({ title, text }) {
-    return (
-        <article pgs="card flexColumnTexts">
-            <strong>{title}</strong>
-            <p>{text}</p>
-        </article>
-    );
-}
-
-export default function Grid() {
-    return (
-        <>
-            <div pgs="container flexColumnTexts">
-                <strong>Standard section</strong>
-                <p>Centered content inside a MyPGS section.</p>
-            </div>
-
-            {[2, 3, 4, 6].map((count) => (
-                <div key={count} pgs={`grid-${count}`}>
-                    {columns.slice(0, count).map(([title, text]) => (
-                        <ColumnCard key={title} title={title} text={text} />
-                    ))}
-                </div>
-            ))}
-        </>
-    );
-}