update

zumerlab · Jul 20, 2024 · 701daa1 · 701daa1
1 parent 635af59
commit 701daa1
Show file tree

Hide file tree

Showing 25 changed files with 9 additions and 644 deletions.
diff --git a/package.json b/package.json
@@ -1,16 +1,12 @@
 {
   "name": "orbit",
   "version": "0.0.1",
-  "description": "CSS radial library",
+  "description": "The CSS radial composer",
   "main": "./src/orbit.js",
-  "directories": {
-    "example": "examples"
-  },
   "scripts": {
     "build": "npx @zumerbox/build -n orbit -j src/orbit.js -s src/orbit.scss",
-    "doc:scss": "npx @zumerbox/doc-extractor src/orbit.scss -folder docs-one-scss -scss-imports -public-folder https://github.com/zumerlab/orbit/blob/main/src/scss",
-    "doc:scssx": "npx @zumerbox/doc-extractor src/scss -folder docs-scss-mutiple -multiple -public-folder https://github.com/zumerlab/orbit/blob/main/src/scss",
-    "doc:js": "npx @zumerbox/doc-extractor src/js -folder docs-js-mutiple  -multiple -public-folder https://github.com/zumerlab/orbit/blob/main/src/web-components"
+    "bump": "npx @zumerbox/bump",
+    "postbump": "npx @zumerbox/changelog && git add CHANGELOG.md && git commit -m \"Bumped version\" && git push --follow-tags"
   },
   "repository": {
     "type": "git",

diff --git a/src/js/orbit-progress.js b/src/js/orbit-progress.js
@@ -1,40 +1,4 @@
-/*! 
-## o-progress
 
-`<o-progress>` is a standard web-component for rendering a radial progress bar. Just one o-progress can be used per orbit.
-It has two elements: a progress bar and a background bar that show the max range progress bar can achieve.
-
-### Customization
-
-  - Attribute `value`: To set a number that represents the progress bar value.
-  - Attribute `max`: To set the max allowed `value`.
-  - Attribute `bar-color`: To set a color for progress bar. Default `orange`
-  - Attribute `bg-color`: To set a color for background bar. Default `transparent`
-  - Attribute `shape`: To set a different endings looks. Currently, you can choose between `circle`, `arrow`, `slash`, `backslash` and `zigzag` shapes. Default `none`
-
-
-  - Utility class `.range-*`: Default '360deg'
-  - Utility class `.from-*`: Default '0deg'
-  - Utility class `.grow-*x`: To increase `o-progress` height by multiplying orbit radius. Default '1x'
-  - Utility class `.reduce-*`: To reduce `o-progress` height by reducing current orbit percentage. Default '100'
-  - Utility class `.inner-orbit`: To place `o-progress` just below its orbit
-  - Utility class `.outer-orbit`: To place `o-progress` just above its orbit
-  - Utility class `.quarter-inner-orbit`: To place `o-progress` a 25% into its orbit.
-  - Utility class `.quarter-outer-orbit`: To place `o-progress` a 25% outer its orbit.
-
-
-  - CSS styles. You can customize `o-progress` by adding CSS properties to `o-progress path` 
-  
-**Important:** `<o-progress>` can only be used into `.orbit` or `.orbit-*`
-
-### Usage
-
-```html
-<div class="orbit"> 
-  <o-progress value="75" max="100" shape="circle" />
-</div>
-```
-*/
 export class OrbitProgress extends HTMLElement {
   static get observedAttributes() {
     return ['value', 'shape', 'bar-color', 'bg-color', 'max', 'width', 'height'];

diff --git a/src/js/orbit-resize.js b/src/js/orbit-resize.js
@@ -1,24 +1,4 @@
-/*! 
-## Orbit.resize()
 
-Resize is currently the only JS method of Orbit. 
-
-### Usage
-
-```html
-<body>
-    <div class="container">
-        <div class="orbit-zone">
-            <!-- Orbit app -->
-        </div>
-    </div>
-    <script scr="orbit-resize.js">
-        Orbit.resize('container');
-    </script>
-</body>
-```
-
-*/
 let Orbit = {}
 
 Orbit = {

diff --git a/src/scss/_capsule.scss b/src/scss/_capsule.scss
@@ -1,33 +1,4 @@
 @use './variables' as *;
-/*!
-## .capsule
-
-Capsule is a class to put text or another content. Currently, it can be used into `satellites` and `segments`.
-There are some utilties to modify `.capsule` orientation content.
-
-### Usage
-
-```html
-<div class="satellite">
-  <div class="capsule stable">
-    Some text here.
-  </div>
-</div> 
-```
-
-#### Utilities
-
-- `stable`: to mantain content always horizontal. 
-- `turn-left`: to turn content 90deg left
-- `turn-right`: to turn content 90deg right
-- `flip`: to turn content upside-down.
-
-### TO-DO
-
-- Add some visual aids to prevent add capsule in elements are no satellite or segment.
-
-
-*/
 
 .capsule  {
   --o-angle-composite: 0deg;

diff --git a/src/scss/_color-theme.scss b/src/scss/_color-theme.scss
@@ -92,73 +92,4 @@
   --o-gray-darker: color-mix(in oklab, var(--o-gray), black 40%);
   --o-gray-black: color-mix(in oklab, var(--o-gray), black 78%);
 
-   /* Primary Colors */
-   --primary-color: #fffffe; /* Main primary color, here for overall bg */
-
-   /* Secondary Colors */
-   --secondary-color: #90b4ce; /* Secondary button, link color */
-   --tertiary-color: #d8eefe; /* Main primary color, here for overall bg */
-
-   /* Accent Colors */
-   --accent-color: #ef4565; /* Alerts, notifications, call-to-action */
-
-   /* Highlight Colors */
-   --highlight-color: #3da9fc; /* Highlighted elements, important details */
-
-   /* Stroke Colors */
-   --border-color: #094067; /* Borders, outlines, separators, titles */
-
-   /* Neutral Colors */
-   --dark-color: #5f6c7b; /* Used for dark text, icons */
-
-   --light-color: var(--primary-color); /* Used for light backgrounds, contrasts */
-
-   /* light theme regular use for pages */
-
-   --background: var(--primary-color);
-
-   --headline: var(--border-color);
-
-   --dark-text: var(--dark-color);
-
-   --light-text: var(--light-color);
-
-   --button: var(--highlight-color);
-
-   /* dark section theme regular use for pages */
-
-   --background: var(--tertiary-color);
-
-   --card-background: var(--primary-color);
-
-   --headline: var(--border-color);
-
-   --dark-text: var(--dark-color);
-
-   --light-text: var(--light-color);
-
-   --button: var(--highlight-color);
-
-   /* light section theme regular use for pages */
-
-   --background: var(--primary-color);
-
-   --card-background: var(--border-color);
-
-   --headline: var(--border-color);
-
-   --dark-text: var(--dark-color);
-
-   --light-text: var(--light-color);
-
-   --button: var(--highlight-color);
-
-
-   /* Background Colors */
-   --background-color: #f8f9fa; /* Overall background */
-   --section-background-color: #ffffff; /* Background for sections */
-
-   /* Text Colors */
-   --text-color: #212529; /* Primary text color */
-   --secondary-text-color: #6c757d; /* Secondary text color */
 }
diff --git a/src/scss/_label.scss b/src/scss/_label.scss
@@ -1,10 +1,5 @@
 @use './variables' as *;
-/*
-## <o-label>
 
-See o-label docs in web-component file.
-
-*/
 o-label {
   --o-angle-composite: var(--o-angle) * var(--o-orbit-child-number) * var(--o-direction, 1);
   container-name: otext;

diff --git a/src/scss/_label_theme.scss b/src/scss/_label_theme.scss
@@ -1,7 +1 @@
 @use './variables' as *;
-/*!
-## <o-label>
-
-See o-label docs in web-component file.
-
-*/
diff --git a/src/scss/_orbit-class.scss b/src/scss/_orbit-class.scss
@@ -1,82 +1,5 @@
 @use './variables' as *;
-/*! 
-## .orbit or .orbit-*
 
-This class renders a circumsference inside an .orbit-zone. Inside `.orbit` can be placed many elements, such as satellites, sectors, progress, spokes, segments, and labels.
-By default there are 12 orbits. The number can be modify with `$max-orbits` var at `_variables.scss`.
-
-**Important:** .orbit or .orbit-* is a direct child element of .orbit-zone.
-
-### Stack order
-Orbits stack order is same as any html element. First orbit is below second one. 
-
-### Usage: 
-
-- Basic example that renders two orbits
-  ```html
-  <div class="orbit-zone">
-    <div class="orbit"></div>
-    <div class="orbit"></div>
-  </div>
-  ```
-
-- Basic example that renders two orbits of same radius the latter one is abowe the former.
-  ```html
-  <div class="orbit-zone">
-    <div class="orbit-10"></div>
-    <div class="orbit-10"></div>
-  </div>
-  ```
-
-- This renders three orbits with custom distribution
-  ```html
-  <div class="orbit-2"></div>
-  <div class="orbit-9"></div>
-  <div class="orbit-12"></div>
-  ```
-
-- This renders nested orbits around a satellite
-  ```html
-  <div class="orbit-zone">
-    <div class="orbit">
-      <div class="satellite">
-        <div class="orbit-zone">
-          <div class="orbit"></div>
-          <div class="orbit"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-  ```
-  
-### Customization:
-
-It has some special attributes and css variables to customize it or its children elements:
-
-  - Utility class `.reduce-*`: To decrease size according an orbit fracction percentage. Default 1.
-  - Utility class `.goey-fx`: This utility allows orbit child elements to look grouped and sticky. Try it!
-
-  - CSS styles. User can customize `.orbit` by adding CSS properties.
-
-Besides css properties that user can change according his needs, there two css variables to turn `.orbit`or `.orbit-*` into 
-an ellipse (`--o-ellipse-x`, and `--o-ellipse-y`). This will affect orbit and its children, with an excepcion of `<o-sector>`, `<o-progress>`, and `<o-label>` web components that will be hiden when orbit is an ellipse. Values range from 0 to 1.
-
-```html
-<div class="orbit-zone" style="--o-ellipse-x: 0.6">
-  <div class="orbit">
-    <div class="satellite">
-      <div class="orbit-zone">
-        <div class="orbit"></div>
-        <div class="orbit"></div>
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-There are some utility classes that are set on `.orbit` element and affect its child radial layout (`.from-*`, `.range-*`, etc).  Please see [**Radial Layout section**].
-
-*/
 .orbit, [class*='orbit-']:not(.orbit-zone) {
   container-name: orbit;
   --o-base-diameter: var(--o-orbit-number) * var(--o-length) / #{$max-orbits};

diff --git a/src/scss/_orbit-class_theme.scss b/src/scss/_orbit-class_theme.scss
@@ -1,6 +1,4 @@
-/* 
-  .orbit theme 
-*/
+
 .orbit, [class*='orbit-']:not(.orbit-zone) {
   border: 1px solid var(--o-gray);
 }
diff --git a/src/scss/_orbit-zone.scss b/src/scss/_orbit-zone.scss
@@ -1,32 +1,4 @@
-/*! 
-## .orbit-zone
 
-Orbit-zone is a container class that groups `.orbit` classes. It serves as a container with a size defined once by `--o-length` when the Orbit app is initialized.
-~~When orbit-zone is nested into a `.satellite`, its length will depend on the `.satellite`'s `.orbit` diameter.~~
-
-### Customization
-
-  - Aligment class utilities: `.center`, `center-left`, `.center-right`, `.top-left`, `.top-center`, `.top-right`, `.bottom-left`, `.bottom-center`,  `.bottom-right`. Default `.center`
-
-**Note:** Orbit is 100% CSS, but in case user needs Orbit be responsive there is an optional tiny JS script that modifies `--o-length` when a parent element of `.orbit-zone` is resized. See how to use in Orbit.resize docs
-
-**Important:** The `orbit-zone` class can only be nested into a `.satellite`.
-
-### Usage
-
-```html
-<div class="orbit-zone">
-  <div class="orbit"></div>
-  <div class="orbit">
-    <div class="satellite">
-      <div class="orbit-zone"> <!-- nested -->
-        <div class="orbit"></div>
-      </div>
-    </div>
-  </div>
-</div>
-```
-*/
 .orbit-zone {
   container-name: orbitzone;
   /* Reset to defaults everytime orbit-zone is used */

diff --git a/src/scss/_orbit-zone_theme.scss b/src/scss/_orbit-zone_theme.scss
@@ -1,9 +0,0 @@
-/* 
-  .orbital-zone theme
-
-  .orbital-zone {
-    Your theme setting here
-  }
-  
-  
-*/

diff --git a/src/scss/_progress.scss b/src/scss/_progress.scss
@@ -1,9 +1,4 @@
-/*
-## <o-progress>
 
-See o-progress docs in web-component docs.
-
-*/
 o-progress {
   container-name: oprogress;
   r: var(--o-radius);

diff --git a/src/scss/_progress_theme.scss b/src/scss/_progress_theme.scss
@@ -1,7 +1 @@
-/* 
-  <o-progress> theme
-  
-  o-progress {
-    Your theme setting here
-  }
-*/
+