Merge pull request #3 from zumerlab/auto-child

Auto child
zumerlab · Oct 9, 2023 · b15f382 · b15f382
2 parents 97f3cf8 + 6fced2a
commit b15f382
Show file tree

Hide file tree

Showing 56 changed files with 5,396 additions and 621 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,3 @@
 /css
 /dist
-notes.md
+/node_modules
diff --git a/README.md b/README.md
@@ -49,11 +49,11 @@ Folllowing code set a container and inside it a radial layout with three circles
     <title>Zumer CSS Rocks!</title>
   </head>
   <body>
-    <div class="z-container">
-      <div class="ring-2 items-3">
-        <div class="item"></div>
-        <div class="item"></div>
-        <div class="item"></div>
+    <div class="pod">
+      <div class="orbit-2 orbiters-3">
+        <div class="orbiter"></div>
+        <div class="orbiter"></div>
+        <div class="orbiter"></div>
       </div>
     </div>
   </body>
@@ -64,74 +64,74 @@ Folllowing code set a container and inside it a radial layout with three circles
 
 Basic documentation to understand and start with Zumer CSS.
 
-### `z-container`
+### `pod`
 
-The `z-container` serves as the root element to scaffold Zumer. It encapsulates the entire Zumer framework and defines the boundaries for its usage. Multiple `z-container` elements can coexist on the same page, allowing for modular and flexible implementation.
+The `pod` serves as the root element to scaffold Zumer. It encapsulates the entire Zumer framework and defines the boundaries for its usage. Multiple `pod` elements can coexist on the same page, allowing for modular and flexible implementation.
 
-At the `z-container` level, major CSS variables are defined, providing a centralized and customizable approach to styling and theming Zumer components. These variables can be easily modified within each `z-container` instance, ensuring consistency and flexibility across different sections of your application.
+At the `pod` level, major CSS variables are defined, providing a centralized and customizable approach to styling and theming Zumer components. These variables can be easily modified within each `pod` instance, ensuorbit consistency and flexibility across different sections of your application.
 
-### `ring-*` (probably orbit)
+### `orbit-*` (probably orbit)
 
-The `ring-*` classes act as guides for positioning other elements within the Zumer radial grid. Think of them as rows in the grid structure. They play an important role in organizing and aligning elements within the circular layout of Zumer.
+The `orbit-*` classes act as guides for positioning other elements within the Zumer radial grid. Think of them as rows in the grid structure. They play an important role in organizing and aligning elements within the circular layout of Zumer.
 
-Currently, there are six predefined ring levels available (`ring-1`, `ring-2`, `ring-3`...). Each ring level is separated by a distance of 50px, creating a visually pleasing spacing between elements. However, you have the flexibility to adjust the distance as needed by utilizing CSS variables.
+Currently, there are six predefined orbit levels available (`orbit-1`, `orbit-2`, `orbit-3`...). Each orbit level is separated by a distance of 50px, creating a visually pleasing spacing between elements. However, you have the flexibility to adjust the distance as needed by utilizing CSS variables.
 
-By leveraging the `ring-*` classes, you can easily position and arrange elements within the Zumer radial grid, achieving harmonious and visually appealing circular designs.
+By leveraging the `orbit-*` classes, you can easily position and arrange elements within the Zumer radial grid, achieving harmonious and visually appealing circular designs.
 
-It is possible to use multiple same level `ring-*` to stack differente elements.
+It is possible to use multiple same level `orbit-*` to stack differente elements.
 
 ### `core`
 
-The `core` class functions similarly to a regular ring but is placed at the center of the container. It is particularly useful for positioning radial elements such as watch or gauge needles.
+The `core` class functions similarly to a regular orbit but is placed at the center of the container. It is particularly useful for positioning radial elements such as watch or gauge needles.
 
-### `arc`
+### `sector`
 
-If rings resemble rows, the `arc` class can be thought of as columns in the Zumer radial grid. An `arc` is a radial segment that serves as the background support for radial designs, but also may work standalone as buttons for instance. It offers customizable options, allowing you to fine-tune its appearance to suit your specific needs.
+If orbits resemble rows, the `sector` class can be thought of as columns in the Zumer radial grid. An `sector` is a radial segment that serves as the background support for radial designs, but also may work standalone as buttons for instance. It offers customizable options, allowing you to fine-tune its appearance to suit your specific needs.
 
-With the `arc` class, you can customize properties such as width, gap, offset, arc length, border curvature, and more. This level of control enables you to create visually stunning and unique radial layouts.
+With the `sector` class, you can customize properties such as width, gap, offset, sector length, border curvature, and more. This level of control enables you to create visually stunning and unique radial layouts.
 
 By experimenting with different configurations, you can achieve a wide range of design aesthetics, whether you prefer a sleek and minimalistic look or a more intricate and expressive pattern.
 
 ```html
-    <div class="z-container">
-      <div class="ring-1 items-3">
-        <div class="arc"></div>
-        <div class="arc"></div>
-        <div class="arc"></div>
+    <div class="pod">
+      <div class="orbit-1 orbiters-3">
+        <div class="sector"></div>
+        <div class="sector"></div>
+        <div class="sector"></div>
       </div>
     </div>
 ```
 
-In this example, three arcs are placed in a Ring. To draw three arcs that cover the entire ring, you need to include the `items-3` class in the ring element. Additionally, you can utilize other parent options to customize the start angle and arc length.
+In this example, three sectors are placed in a orbit. To draw three sectors that cover the entire orbit, you need to include the `orbiters-3` class in the orbit element. Additionally, you can utilize other parent options to customize the start angle and sector length.
 
-- Use the `offset-*` class to specify the starting angle of the arcs within the ring.
-- Employ the `arc-*` class to define the length of the ring arc covered by the arcs.
+- Use the `offset-*` class to specify the starting angle of the sectors within the orbit.
+- Employ the `limit-*` class to define the length of the orbit sector covered by the sectors.
 
-### `item` (probably orbiter)
+### `orbiter` (probably orbiter)
 
-The `item` class is used to position and contain content within the Zumer radial grid. It offers various customization options, including different sizes (`xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`), shapes (`line`, `circle`, `box`, `rounded`, `blob`), orbital position (`stationary`), and relative ring positions (`middle`, `upper`, `lower`).
+The `orbiter` class is used to position and contain content within the Zumer radial grid. It offers various customization options, including different sizes (`xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`), shapes (`line`, `circle`, `box`, `rounded`, `blob`), orbital position (`stationary`), and relative orbit positions (`middle`, `upper`, `lower`).
 
-One of the notable features of Zumer is the ability to nest `item` elements, allowing for complex and layered radial designs.
+One of the notable features of Zumer is the ability to nest `orbiter` elements, allowing for complex and layered radial designs.
 
 ```html
-<div class="ring-2 items-2">
-  <div class="item box xl">
-    <div class="ring-3 items-3">
-      <div class="item rounded xxs"></div>
-      <div class="item box xxs"></div>
-      <div class="item xxs"></div>
+<div class="orbit-2 orbiters-2">
+  <div class="orbiter box xl">
+    <div class="orbit-3 orbiters-3">
+      <div class="orbiter rounded xxs"></div>
+      <div class="orbiter box xxs"></div>
+      <div class="orbiter xxs"></div>
     </div>
   </div>
-  <div class="item l"></div>
+  <div class="orbiter l"></div>
 </div>
 ```
 
 ### `label`
 
-The `label` component is used to place labels on items within the Zumer radial grid. It can be customized with the same shapes as items and includes a connector line for visual clarity.
+The `label` component is used to place labels on orbiters within the Zumer radial grid. It can be customized with the same shapes as orbiters and includes a connector line for visual clarity.
 
 ```html
-  <div class="item">
+  <div class="orbiter">
      <div class="label pos-45">
       <span class="text">Hi there!</span>
     </div>
@@ -140,34 +140,34 @@ The `label` component is used to place labels on items within the Zumer radial g
 
 ### `progress` (CSS Only)
 
-The `progress` component works with rings and is particularly useful for creating circular progress bars or knobs. It is implemented using CSS and gradient properties, allowing for easy customization and styling.
+The `progress` component works with orbits and is particularly useful for creating circular progress bars or knobs. It is implemented using CSS and gradient properties, allowing for easy customization and styling.
 
 ```html
-  <div class="ring-1">
-    <div class="z-progress" style="--progress: 75">
+  <div class="orbit-1">
+    <div class="progress" style="--progress: 75">
     </div>
   </div>
 ```
 
 ### `svg progress` (SVG)
 
-The `svg progress` component also works with rings and serves the purpose of creating circular progress bars or knobs. It is implemented using SVG.
+The `svg progress` component also works with orbits and serves the purpose of creating circular progress bars or knobs. It is implemented using SVG.
 
 ```html
-   <div class="ring-3 ">
-      <svg class="z-svg">
+   <div class="orbit-3 ">
+      <svg class="svg-pod">
         <circle class="svg-progress" style="--val: 59;" /> 
       </svg>
     </div>
 ```
 
 ### `svg markers` (SVG)
 
-The `svg markers` component, designed for rings, allows for the creation of markers within circular progress bars or knobs. It is implemented using SVG, providing a versatile way to indicate specific points or milestones within the circular progress.
+The `svg markers` component, designed for orbits, allows for the creation of markers within circular progress bars or knobs. It is implemented using SVG, providing a versatile way to indicate specific points or milestones within the circular progress.
 
 ```html
-   <div class="ring-3 ">
-      <svg class="z-svg">
+   <div class="orbit-3 ">
+      <svg class="svg-pod">
           <circle class="markers" /> 
         </svg>
     </div>

diff --git a/...e_snapshots__/zumer-examples-spec-js-test-zumer-css-examples-generic-1-snap.png b/...e_snapshots__/zumer-examples-spec-js-test-zumer-css-examples-generic-1-snap.png
diff --git a/...age_snapshots__/zumer-examples-spec-js-test-zumer-css-examples-index-1-snap.png b/...age_snapshots__/zumer-examples-spec-js-test-zumer-css-examples-index-1-snap.png
diff --git a/...apshots__/zumer-examples-spec-js-test-zumer-css-examples-sector-grid-1-snap.png b/...apshots__/zumer-examples-spec-js-test-zumer-css-examples-sector-grid-1-snap.png
diff --git a/...ge_snapshots__/zumer-examples-spec-js-test-zumer-css-examples-spread-1-snap.png b/...ge_snapshots__/zumer-examples-spec-js-test-zumer-css-examples-spread-1-snap.png
diff --git a/...age_snapshots__/zumer-examples-spec-js-test-zumer-css-examples-watch-1-snap.png b/...age_snapshots__/zumer-examples-spec-js-test-zumer-css-examples-watch-1-snap.png
diff --git a/__tests__/zumer-examples.spec.js b/__tests__/zumer-examples.spec.js
@@ -0,0 +1,58 @@
+const puppeteer = require('puppeteer');
+
+describe('Test Zumer CSS examples', () => {
+  let browser;
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch({
+      headless: 'new',
+      // `headless: true` (default) enables old Headless;
+      // `headless: 'new'` enables new Headless;
+      // `headless: false` enables “headful” mode.
+    });
+  });
+
+  it('Index', async () => {
+    const page = await browser.newPage();
+    await page.goto('http://localhost:5500/examples/');
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  it('Generic', async () => {
+    const page = await browser.newPage();
+    await page.goto('http://localhost:5500/examples/generic.html');
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  it('Spread', async () => {
+    const page = await browser.newPage();
+    await page.goto('http://localhost:5500/examples/spread.html');
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  it('Watch', async () => {
+    const page = await browser.newPage();
+    await page.goto('http://localhost:5500/examples/watch.html');
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  it('Sector grid', async () => {
+    const page = await browser.newPage();
+    await page.goto('http://localhost:5500/examples/arcgrid.html');
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+});
diff --git a/assets/css/index.min.css b/assets/css/index.min.css
diff --git a/assets/css/index.min.css.map b/assets/css/index.min.css.map
diff --git a/assets/css/zumer-ui.min.css b/assets/css/zumer-ui.min.css
diff --git a/assets/css/zumer-ui.min.css.map b/assets/css/zumer-ui.min.css.map
diff --git a/assets/css/zumer.min.css b/assets/css/zumer.min.css
diff --git a/assets/css/zumer.min.css.map b/assets/css/zumer.min.css.map