@arterial/circular-progress - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

package.json

 {
   "name": "@arterial/circular-progress",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Another React Material Circular Progress",
@@ -29,3 +29,3 @@ "author": "jdc2000",
   },
-  "gitHead": "d96731448946c03046c30ba3a5061231bdb7f49e"
+  "gitHead": "03a82bf852e23d85ff9fa996dbe7b7b99a7e6211"
 }

README.md

@@ -1,17 +0,131 @@
-# `Arterial Circular Progress`
+# Arterial Circular Progress
 
-Another React Material Circular Progress
+[Another React Material Circular Progress](https://arterialjs.org/circular-progress)
 
-## Install
+## Installation
 
+```zsh
+npm install @arterial/circular-progress
 ```
-npm i @arterial/circular-progress
-```
 
 ## Usage
 
+### Styles
+
+#### Sass
+
+```scss
+@use "@material/circular-progress/index.scss" as circular-progress;
+@include circular-progress.core-styles;
 ```
-import { CircularProgress } from '@arterial/circular-progress'
 
-// TODO: DEMONSTRATE REACT COMPONENT
+#### CSS
+
+```jsx
+import '@material/circular-progress/dist/mdc.circular-progress.css';
 ```
+
+### JSX
+
+```jsx
+import { CircularProgress } from '@arterial/circular-progress';
+```
+
+## Determinate Progress
+
+Determinate circular indicators fill the invisible, circular track with color, as the indicator moves from 0 to 360 degrees.
+
+```jsx
+<CircularProgress progress={0.25} />
+<CircularProgress progress={0.5} />
+<CircularProgress progress={0.75} />
+<CircularProgress progress={1} />
+```
+
+## Indeterminate Progress
+
+Indeterminate circular indicators grow and shrink in size while moving along the invisible track.
+
+```jsx
+<CircularProgress />
+<CircularProgress medium />
+<CircularProgress small />
+```
+
+## Other Variants
+
+### Four Colors
+
+```jsx
+<CircularProgress fourColors />
+<CircularProgress fourColors medium />
+<CircularProgress fourColors small />
+```
+
+### Custom Four Colors
+
+```jsx
+// scss
+// @use '@material/circular-progress/mixins' as circular-progress-mixins;
+// $colors: (purple, pink, teal, gray);
+// .mdc-circular-progress {
+//   @include circular-progress-mixins.indeterminate-colors($colors);
+// }
+
+// jsx
+<CircularProgress fourColors />
+<CircularProgress fourColors medium />
+<CircularProgress fourColors small />
+```
+
+### Buttons
+
+```jsx
+import { Button } from '@arterial/button'
+
+<Button
+  icon={<CircularProgress small />}
+  label="Text"
+/>
+<Button
+  icon={<CircularProgress small />}
+  outlined
+  label="Outlined"
+/>
+<Button
+  icon={<CircularProgress small />}
+  unelevated
+  label="Unelevated"
+/>
+<Button
+  icon={<CircularProgress small />}
+  raised
+  label="Raised"
+/>
+```
+
+### Chips
+
+```jsx
+import { Chip, ChipSet } from '@arterial/chip';
+
+<ChipSet choice>
+  <Chip icon={<CircularProgress small />} text="Alfa" />
+  <Chip icon={<CircularProgress small />} selected text="Bravo" />
+</ChipSet>;
+```
+
+## Props
+
+### CircularProgress
+
+| Name       | Type    | Description                                                       |
+| ---------- | ------- | ----------------------------------------------------------------- |
+| children   | node    | Elements to be displayed within root element.                     |
+| className  | string  | Classes to be applied to the root element.                        |
+| closed     | boolean | Hides the circular progress indicator.                            |
+| fourColors | boolean | Enables a four colors variant.                                    |
+| label      | boolean | Sets the aria label of the element. Defaults to Progress Bar.     |
+| medium     | boolean | Sets the stroke and container sizes for the medium-sized variant. |
+| progress   | number  | Sets the progress bar length.                                     |
+| small      | boolean | Sets the stroke and container sizes for the small variant.        |

No alert changes

Improved metrics

Total package byte prevSize

11951

increased by48.98%

Number of package files

5

increased by25%

Number of lines in readme file

132

increased by633.33%

No dependency changes