feat(v1.11.0): docs

Siumauricio · Apr 9, 2023 · 557ce78 · 557ce78
1 parent e201a1d
commit 557ce78
Show file tree

Hide file tree

Showing 8 changed files with 771 additions and 302 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,41 +4,30 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [1.11.0](https://github.com/Siumauricio/rippleui/compare/v1.10.1...v1.11.0) (2023-04-09)
 
-
 ### Features
 
-* **spinner:** spinner component ([eb83aff](https://github.com/Siumauricio/rippleui/commit/eb83aff381ee98f99dc15bfaa6bcd098c1c65960))
-
-
-### Bug Fixes
-
-*  https://github.com/Siumauricio/rippleui/issues/88 ([80aced4](https://github.com/Siumauricio/rippleui/commit/80aced40d37ec9f003ea4184fa4885dce60e29db))
-
+- **spinner:** spinner component ([eb83aff](https://github.com/Siumauricio/rippleui/commit/eb83aff381ee98f99dc15bfaa6bcd098c1c65960))
 
 ### Refactor
 
-* **switch:** set gray-7 to border hover ([4f5325b](https://github.com/Siumauricio/rippleui/commit/4f5325b7d80f4959aaa4e6e4caeabec1de769471))
+- **switch:** set gray-7 to border hover ([4f5325b](https://github.com/Siumauricio/rippleui/commit/4f5325b7d80f4959aaa4e6e4caeabec1de769471))
 
 ### [1.10.1](https://github.com/Siumauricio/rippleui/compare/v1.10.0...v1.10.1) (2023-03-30)
 
-
 ### Refactor
 
-* remove default font ([4b8b4a9](https://github.com/Siumauricio/rippleui/commit/4b8b4a914a6aafae2d5f8cfa2cee7f3ab1354d45))
+- remove default font ([4b8b4a9](https://github.com/Siumauricio/rippleui/commit/4b8b4a914a6aafae2d5f8cfa2cee7f3ab1354d45))
 
 ## [1.10.0](https://github.com/Siumauricio/rippleui/compare/v1.9.2...v1.10.0) (2023-03-20)
 
-
 ### Features
 
-* **button, checkbox, input, radio, select, textarea:** add solid variant ([53a0e54](https://github.com/Siumauricio/rippleui/commit/53a0e546389d0518bc969250eea6e5bdda5261d0))
-* **sidebar:** sidebar component ([e99276f](https://github.com/Siumauricio/rippleui/commit/e99276f541236cd53a589bf1bfcb40c559c61aee))
-
+- **button, checkbox, input, radio, select, textarea:** add solid variant ([53a0e54](https://github.com/Siumauricio/rippleui/commit/53a0e546389d0518bc969250eea6e5bdda5261d0))
+- **sidebar:** sidebar component ([e99276f](https://github.com/Siumauricio/rippleui/commit/e99276f541236cd53a589bf1bfcb40c559c61aee))
 
 ### Bug Fixes
 
-* **tooltip:** set value instead variable ([28c3aa9](https://github.com/Siumauricio/rippleui/commit/28c3aa9a837d10500618429960edf392493da43e))
-
+- **tooltip:** set value instead variable ([28c3aa9](https://github.com/Siumauricio/rippleui/commit/28c3aa9a837d10500618429960edf392493da43e))
 
 ### [1.9.2](https://github.com/Siumauricio/rippleui/compare/v1.9.1...v1.9.2) (2023-03-05)
 

diff --git a/docs/components/styles/Hero.tsx b/docs/components/styles/Hero.tsx
@@ -10,6 +10,7 @@ export const Hero = () => {
         <div className="flex flex-row justify-center px-4 md:gap-24">
           <div className="flex max-w-3xl flex-col gap-4 pt-10 sm:gap-0 sm:pb-24 sm:pt-20  lg:pt-52">
             <div className="flex flex-col gap-4">
+              <div className="spinn"></div>
               <h1>
                 <span className="text-[40px] font-bold leading-none text-primary  sm:text-5xl lg:text-6xl">
                   Ripple UI
@@ -51,12 +52,12 @@ export const Hero = () => {
             </div>
             <div>
               <div className="relative hidden lg:flex">
-                <div className="pointer-events-none absolute top-3  left-0 flex items-center pl-2 ">
+                <div className="pointer-events-none absolute left-0  top-3 flex items-center pl-2 ">
                   <SearchIcon className="h-4 w-5 fill-content3" />
                 </div>
               </div>
               <input
-                className="input input-block hidden py-2 px-8 lg:flex"
+                className="input input-block hidden px-8 py-2 lg:flex"
                 placeholder="Search..."
               />
             </div>

diff --git a/docs/content/components/spinners.mdx b/docs/content/components/spinners.mdx
@@ -0,0 +1,325 @@
+---
+title: Spinners
+description: Spinners are used to indicate loading state.
+---
+
+# Spinners
+
+Ripple UI comes with a set of spinners that can be used to indicate loading state.
+
+## Default
+
+Simple example of a spinners.
+
+<div className="spinner-simple"></div>
+
+```html
+<div className="spinner-simple"></div>
+```
+
+## Circle
+
+Circle spinner.
+
+ <div className="spinner-circle"></div>
+
+```html
+<div className="spinner-circle"></div>
+```
+
+## Dot intermittent
+
+Dot intermittent spinner.
+
+<div className="spinner-dot-intermittent"> </div>
+
+```html
+<div className="spinner-dot-intermittent"> </div>
+```
+
+## Ring
+
+Ring spinner.
+
+<svg className="spinner-ring" viewBox="25 25 50 50" strokeWidth="5">
+<circle cx="50" cy="50" r="20" />
+</svg>
+
+```html
+<svg className="spinner-ring" viewBox="25 25 50 50" strokeWidth="5">
+<circle cx="50" cy="50" r="20" />
+</svg>
+```
+
+## Dot pulse
+
+Dot pulse spinner.
+
+<div className="spinner-dot-pulse">
+    <div className="spinner-pulse-dot"></div>
+</div>
+
+```html
+<div className="spinner-dot-pulse">
+    <div className="spinner-pulse-dot"></div>
+</div>
+```
+## Wave
+
+Wave spinner.
+
+<div className="spinner-wave">
+<div className="spinner-wave-dot"></div>
+<div className="spinner-wave-dot"></div>
+<div className="spinner-wave-dot"></div>
+<div className="spinner-wave-dot"></div>
+</div>
+
+```html
+<div className="spinner-wave">
+<div className="spinner-wave-dot"></div>
+<div className="spinner-wave-dot"></div>
+<div className="spinner-wave-dot"></div>
+<div className="spinner-wave-dot"></div>
+</div>
+```
+
+## Dot circle
+
+Dot circle spinner.
+
+<div className="spinner-dot-circle">
+<div className="spinner-dot"></div>
+<div className="spinner-dot"></div>
+<div className="spinner-dot"></div>
+<div className="spinner-dot"></div>
+<div className="spinner-dot"></div>
+<div className="spinner-dot"></div>
+<div className="spinner-dot"></div>
+<div className="spinner-dot"></div>
+</div>
+
+```html
+<div className="spinner-dot-circle">
+<div className="spinner-dot"></div>
+<div className="spinner-dot"></div>
+<div className="spinner-dot"></div>
+<div className="spinner-dot"></div>
+<div className="spinner-dot"></div>
+<div className="spinner-dot"></div>
+<div className="spinner-dot"></div>
+<div className="spinner-dot"></div>
+</div>
+```
+
+## Colors
+
+You can have different colors for spinners.
+
+ <div className="flex flex-row">
+
+    <svg
+    className="spinner-ring spinner-primary"
+    viewBox="25 25 50 50"
+    strokeWidth="5"
+    >
+    <circle cx="50" cy="50" r="20" />
+    </svg>
+
+    <svg
+    className="spinner-ring spinner-secondary"
+    viewBox="25 25 50 50"
+    strokeWidth="5"
+    >
+    <circle cx="50" cy="50" r="20" />
+    </svg>
+
+    <svg
+    className="spinner-ring spinner-success"
+    viewBox="25 25 50 50"
+    strokeWidth="5"
+    >
+    <circle cx="50" cy="50" r="20" />
+    </svg>
+
+    <svg
+    className="spinner-ring spinner-error"
+    viewBox="25 25 50 50"
+    strokeWidth="5"
+    >
+    <circle cx="50" cy="50" r="20" />
+    </svg>
+
+    <svg
+    className="spinner-ring spinner-warning"
+    viewBox="25 25 50 50"
+    strokeWidth="5"
+    >
+    <circle cx="50" cy="50" r="20" />
+    </svg>
+</div>
+
+```html
+ <div className="flex flex-row">
+
+    <svg
+    className="spinner-ring spinner-primary"
+    viewBox="25 25 50 50"
+    strokeWidth="5"
+    >
+    <circle cx="50" cy="50" r="20" />
+    </svg>
+
+    <svg
+    className="spinner-ring spinner-secondary"
+    viewBox="25 25 50 50"
+    strokeWidth="5"
+    >
+    <circle cx="50" cy="50" r="20" />
+    </svg>
+
+    <svg
+    className="spinner-ring spinner-success"
+    viewBox="25 25 50 50"
+    strokeWidth="5"
+    >
+    <circle cx="50" cy="50" r="20" />
+    </svg>
+
+    <svg
+    className="spinner-ring spinner-error"
+    viewBox="25 25 50 50"
+    strokeWidth="5"
+    >
+    <circle cx="50" cy="50" r="20" />
+    </svg>
+
+    <svg
+    className="spinner-ring spinner-warning"
+    viewBox="25 25 50 50"
+    strokeWidth="5"
+    >
+    <circle cx="50" cy="50" r="20" />
+    </svg>
+</div>
+```
+
+## Size
+
+You can have different sizes for spinners.
+
+ <div className="flex flex-row">
+
+    <svg
+    className="spinner-ring spinner-primary spinner-sm"
+    viewBox="25 25 50 50"
+    strokeWidth="5"
+    >
+    <circle cx="50" cy="50" r="20" />
+    </svg>
+
+    <svg
+    className="spinner-ring spinner-primary spinner-md"
+    viewBox="25 25 50 50"
+    strokeWidth="5"
+    >
+    <circle cx="50" cy="50" r="20" />
+    </svg>
+
+    <svg
+    className="spinner-ring spinner-primary spinner-lg"
+    viewBox="25 25 50 50"
+    strokeWidth="5"
+    >
+    <circle cx="50" cy="50" r="20" />
+    </svg>
+
+    <svg
+    className="spinner-ring spinner-primary spinner-xl"
+    viewBox="25 25 50 50"
+    strokeWidth="5"
+    >
+    <circle cx="50" cy="50" r="20" />
+    </svg>
+</div>
+
+```html
+ <div className="flex flex-row">
+
+    <svg
+    className="spinner-ring spinner-primary spinner-sm"
+    viewBox="25 25 50 50"
+    strokeWidth="5"
+    >
+    <circle cx="50" cy="50" r="20" />
+    </svg>
+
+    <svg
+    className="spinner-ring spinner-primary spinner-md"
+    viewBox="25 25 50 50"
+    strokeWidth="5"
+    >
+    <circle cx="50" cy="50" r="20" />
+    </svg>
+
+    <svg
+    className="spinner-ring spinner-primary spinner-lg"
+    viewBox="25 25 50 50"
+    strokeWidth="5"
+    >
+    <circle cx="50" cy="50" r="20" />
+    </svg>
+
+    <svg
+    className="spinner-ring spinner-primary spinner-xl"
+    viewBox="25 25 50 50"
+    strokeWidth="5"
+    >
+    <circle cx="50" cy="50" r="20" />
+    </svg>
+</div>
+```
+
+
+## Custom
+
+You can change the colors of the spinner
+<div className="flex flex-row gap-8">
+    <div className="spinner-dot-intermittent [--spinner-color:var(--pink-8)]"></div>
+    <div className="spinner-circle [--spinner-color:var(--pink-8)]"></div>
+</div>
+```html
+<div className="spinner-dot-intermittent [--spinner-color:var(--pink-8)]"></div>
+<div className="spinner-circle [--spinner-color:var(--pink-8)]"></div>
+```
+
+
+## API
+<Attributes>
+<Attributes.Title>Spinners Classes</Attributes.Title>
+
+| class         | Description          |
+| ------------- | -------------------- |
+| spinner-simple  | Spinner simple         |
+| spinner-circle  | Spinner circle         |
+| spinner-dot-intermittent  | Spinner with dots intermittent         |
+| spinner-pulse-dot  | Spinner pulse dot         |
+| spinner-ring  | Spinner ring         |
+| spinner-wave  | Spinner wave         |
+| spinner-wave-dot  | Spinner wave dot         |
+| spinner-dot-circle  | Spinner dot circle         |
+| spinner-primary  | Spinner primary color         |
+| spinner-secondary  | Spinner secondary color         |
+| spinner-success  | Spinner success color         |
+| spinner-error  | Spinner error color         |
+| spinner-warning  | Spinner warning color         |
+| spinner-sm  | Spinner small size         |
+| spinner-md  | Spinner medium size         |
+| spinner-lg  | Spinner large size         |
+| spinner-xl  | Spinner extra large size         |
+
+
+
+</Attributes>
+
+