@forter/accordion - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

accordion/FcAccordion.js

@@ -5,2 +5,3 @@ import { defineProperty as _defineProperty } from '../_virtual/_rollupPluginBabelHelpers.js';
 import '../accordion-category/fc-accordion-category.js';
+import '../accordion-section/fc-accordion-section.js';
 
@@ -29,4 +30,66 @@ /**
  * ```
+ *  * ## Examples
  *
+ * ```html
+ * <!-- section example open -->
+ * <fc-accordion>
+ *   <fc-accordion-section open>
+ *     <section slot="label" style="display: flex; align-items: center;">
+ *       <fc-counter-circle completed="2" total="4" style="margin-right: 15px;">
+ *       </fc-counter-circle>
+ *       <span style="font-size: 22px;">Integration Overview</span>
+ *     </section>
+ *     <div part="content">
+ *       <fc-card>
+ *         Accordion Content
+ *       </fc-card>
+ *       <fc-card>
+ *         Accordion Content
+ *       </fc-card>
+ *     </div>
+ *   </fc-accordion-section>
+ * </fc-accordion>
+ *
+ * <!-- section example -->
+ * <fc-accordion>
+ *   <fc-accordion-section>
+ *     <section slot="label" style="display: flex; align-items: center;">
+ *       <fc-counter-circle completed="12" total="16" style="margin-right: 15px;">
+ *       </fc-counter-circle>
+ *       <span style="font-size: 22px;">Phase 1</span>
+ *     </section>
+ *     <div part="content">
+ *       <fc-card>
+ *         Accordion Content
+ *       </fc-card>
+ *       <fc-card>
+ *         Accordion Content
+ *       </fc-card>
+ *     </div>
+ *   </fc-accordion-section>
+ * </fc-accordion>
+ *
+ * <!-- disabled section example -->
+ * <fc-accordion>
+ *   <fc-accordion-section disabled>
+ *     <section slot="label" style="display: flex; align-items: center;">
+ *       <fc-counter-circle completed="0" total="4" style="margin-right: 15px;">
+ *       </fc-counter-circle>
+ *       <span style="font-size: 22px;">Phase 2</span>
+ *     </section>
+ *     <div part="content">
+ *     </div>
+ *   </fc-accordion-section>
+ * </fc-accordion>
+ * ```
+ *
  * @element fc-accordion
+ * @cssprop --fc-accordion-section-open-background-color - open background color. example: `var(--indigo-1)`
+ * @cssprop --fc-accordion-section-border-radius - border-radius. example: `10px`
+ * @cssprop --fc-accordion-section-border-color - border color. example: `var(--cyan-2)`
+ * @cssprop --fc-accordion-section-font-color - header font color. example: `var(--indigo-9)`
+ * @cssprop --fc-accordion-section-background-color - header background color. example: `var(--pink-1)`
+ * @cssprop --fc-accordion-section-padding - section padding. example: `10px`
+ * @cssprop --fc-accordion-section-disabled-color - disabled font color. example: `var(--red-1)`
+ * @cssprop --fc-accordion-section-icon-color - arrow icon color. example: `var(--indigo-7)`
  */
@@ -33,0 +96,0 @@

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [1.2.0](https://github.com/forter/web-components/compare/@forter/accordion@1.1.1...@forter/accordion@1.2.0) (2022-08-03)
+
+
+### Features
+
+* **accordion:** add accordion-section component ([#1050](https://github.com/forter/web-components/issues/1050)) ([4201b65](https://github.com/forter/web-components/commit/4201b65))
+
+
+
+
+
 ## [1.1.1](https://github.com/forter/web-components/compare/@forter/accordion@1.1.0...@forter/accordion@1.1.1) (2021-12-27)
@@ -8,0 +19,0 @@

package.json

 {
   "name": "@forter/accordion",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "accordion from Forter Components",
@@ -54,3 +54,3 @@ "author": "Forter Developers",
   },
-  "gitHead": "6f4426098064febb3a1727e9d0a98dae4fd104f4"
+  "gitHead": "9a0fc0f9b91732b4ebbb67d15990d94674d0f9a4"
 }

README.md

@@ -24,1 +24,68 @@ # fc-accordion
 ```
+  * ## Examples
+
+```html
+<!-- section example open -->
+<fc-accordion>
+   <fc-accordion-section open>
+     <section slot="label" style="display: flex; align-items: center;">
+       <fc-counter-circle completed="2" total="4" style="margin-right: 15px;">
+       </fc-counter-circle>
+       <span style="font-size: 22px;">Integration Overview</span>
+     </section>
+     <div part="content">
+       <fc-card>
+         Accordion Content
+       </fc-card>
+       <fc-card>
+         Accordion Content
+       </fc-card>
+     </div>
+   </fc-accordion-section>
+</fc-accordion>
+
+<!-- section example -->
+<fc-accordion>
+   <fc-accordion-section>
+     <section slot="label" style="display: flex; align-items: center;">
+       <fc-counter-circle completed="12" total="16" style="margin-right: 15px;">
+       </fc-counter-circle>
+       <span style="font-size: 22px;">Phase 1</span>
+     </section>
+     <div part="content">
+       <fc-card>
+         Accordion Content
+       </fc-card>
+       <fc-card>
+         Accordion Content
+       </fc-card>
+     </div>
+   </fc-accordion-section>
+</fc-accordion>
+
+<!-- disabled section example -->
+<fc-accordion>
+   <fc-accordion-section disabled>
+     <section slot="label" style="display: flex; align-items: center;">
+       <fc-counter-circle completed="0" total="4" style="margin-right: 15px;">
+       </fc-counter-circle>
+       <span style="font-size: 22px;">Phase 2</span>
+     </section>
+     <div part="content">
+     </div>
+   </fc-accordion-section>
+</fc-accordion>
+```
+
+## CSS Custom Properties
+
+| Property                                       | Description                                      |
+|------------------------------------------------|--------------------------------------------------|
+| `--fc-accordion-section-background-color`      | header background color. example: `var(--pink-1)` |
+| `--fc-accordion-section-border-color`          | border color. example: `var(--cyan-2)`           |
+| `--fc-accordion-section-border-radius`         | border-radius. example: `10px`                   |
+| `--fc-accordion-section-disabled-color`        | disabled font color. example: `var(--red-1)`     |
+| `--fc-accordion-section-font-color`            | header font color. example: `var(--indigo-9)`    |
+| `--fc-accordion-section-icon-color`            | arrow icon color. example: `var(--indigo-7)`     |
+| `--fc-accordion-section-open-background-color` | open background color. example: `var(--indigo-1)` |
+| `--fc-accordion-section-padding`               | section padding. example: `10px`                 |

src/accordion/FcAccordion.js

@@ -5,2 +5,3 @@ import { LitElement, html } from 'lit-element';
 import '../accordion-category/fc-accordion-category';
+import '../accordion-section/fc-accordion-section';
 
@@ -29,4 +30,66 @@ /**
  * ```
+ *  * ## Examples
  *
+ * ```html
+ * <!-- section example open -->
+ * <fc-accordion>
+ *   <fc-accordion-section open>
+ *     <section slot="label" style="display: flex; align-items: center;">
+ *       <fc-counter-circle completed="2" total="4" style="margin-right: 15px;">
+ *       </fc-counter-circle>
+ *       <span style="font-size: 22px;">Integration Overview</span>
+ *     </section>
+ *     <div part="content">
+ *       <fc-card>
+ *         Accordion Content
+ *       </fc-card>
+ *       <fc-card>
+ *         Accordion Content
+ *       </fc-card>
+ *     </div>
+ *   </fc-accordion-section>
+ * </fc-accordion>
+ *
+ * <!-- section example -->
+ * <fc-accordion>
+ *   <fc-accordion-section>
+ *     <section slot="label" style="display: flex; align-items: center;">
+ *       <fc-counter-circle completed="12" total="16" style="margin-right: 15px;">
+ *       </fc-counter-circle>
+ *       <span style="font-size: 22px;">Phase 1</span>
+ *     </section>
+ *     <div part="content">
+ *       <fc-card>
+ *         Accordion Content
+ *       </fc-card>
+ *       <fc-card>
+ *         Accordion Content
+ *       </fc-card>
+ *     </div>
+ *   </fc-accordion-section>
+ * </fc-accordion>
+ *
+ * <!-- disabled section example -->
+ * <fc-accordion>
+ *   <fc-accordion-section disabled>
+ *     <section slot="label" style="display: flex; align-items: center;">
+ *       <fc-counter-circle completed="0" total="4" style="margin-right: 15px;">
+ *       </fc-counter-circle>
+ *       <span style="font-size: 22px;">Phase 2</span>
+ *     </section>
+ *     <div part="content">
+ *     </div>
+ *   </fc-accordion-section>
+ * </fc-accordion>
+ * ```
+ *
  * @element fc-accordion
+ * @cssprop --fc-accordion-section-open-background-color - open background color. example: `var(--indigo-1)`
+ * @cssprop --fc-accordion-section-border-radius - border-radius. example: `10px`
+ * @cssprop --fc-accordion-section-border-color - border color. example: `var(--cyan-2)`
+ * @cssprop --fc-accordion-section-font-color - header font color. example: `var(--indigo-9)`
+ * @cssprop --fc-accordion-section-background-color - header background color. example: `var(--pink-1)`
+ * @cssprop --fc-accordion-section-padding - section padding. example: `10px`
+ * @cssprop --fc-accordion-section-disabled-color - disabled font color. example: `var(--red-1)`
+ * @cssprop --fc-accordion-section-icon-color - arrow icon color. example: `var(--indigo-7)`
  */
@@ -33,0 +96,0 @@ export class FcAccordion extends LitElement {

web-components.json

@@ -6,6 +6,40 @@ {
       "name": "fc-accordion",
-      "description": "An element by Forter\n<!-- Author: Omer Anati <[e-mail]> -->\n\n## Usage\n\n```html\n<script>\n   import '@forter/accordion';\n</script>\n\n<fc-accordion>\n   <fc-accordion-category label=\"galaxy\">\n     S10\n     S20\n   </fc-accordion-category>\n   <fc-accordion-category label=\"iphone\">\n     X\n     XS\n   </fc-accordion-category>\n</fc-accordion>\n```",
-      "jsDoc": "/**\n * An element by Forter\n * <!-- Author: Omer Anati <[e-mail]> -->\n *\n * ## Usage\n *\n * ```html\n * <script>\n *   import '@forter/accordion';\n * </script>\n *\n * <fc-accordion>\n *   <fc-accordion-category label=\"galaxy\">\n *     S10\n *     S20\n *   </fc-accordion-category>\n *   <fc-accordion-category label=\"iphone\">\n *     X\n *     XS\n *   </fc-accordion-category>\n * </fc-accordion>\n * ```\n *\n * @element fc-accordion\n */"
+      "description": "An element by Forter\n<!-- Author: Omer Anati <[e-mail]> -->\n\n## Usage\n\n```html\n<script>\n   import '@forter/accordion';\n</script>\n\n<fc-accordion>\n   <fc-accordion-category label=\"galaxy\">\n     S10\n     S20\n   </fc-accordion-category>\n   <fc-accordion-category label=\"iphone\">\n     X\n     XS\n   </fc-accordion-category>\n</fc-accordion>\n```\n  * ## Examples\n\n```html\n<!-- section example open -->\n<fc-accordion>\n   <fc-accordion-section open>\n     <section slot=\"label\" style=\"display: flex; align-items: center;\">\n       <fc-counter-circle completed=\"2\" total=\"4\" style=\"margin-right: 15px;\">\n       </fc-counter-circle>\n       <span style=\"font-size: 22px;\">Integration Overview</span>\n     </section>\n     <div part=\"content\">\n       <fc-card>\n         Accordion Content\n       </fc-card>\n       <fc-card>\n         Accordion Content\n       </fc-card>\n     </div>\n   </fc-accordion-section>\n</fc-accordion>\n\n<!-- section example -->\n<fc-accordion>\n   <fc-accordion-section>\n     <section slot=\"label\" style=\"display: flex; align-items: center;\">\n       <fc-counter-circle completed=\"12\" total=\"16\" style=\"margin-right: 15px;\">\n       </fc-counter-circle>\n       <span style=\"font-size: 22px;\">Phase 1</span>\n     </section>\n     <div part=\"content\">\n       <fc-card>\n         Accordion Content\n       </fc-card>\n       <fc-card>\n         Accordion Content\n       </fc-card>\n     </div>\n   </fc-accordion-section>\n</fc-accordion>\n\n<!-- disabled section example -->\n<fc-accordion>\n   <fc-accordion-section disabled>\n     <section slot=\"label\" style=\"display: flex; align-items: center;\">\n       <fc-counter-circle completed=\"0\" total=\"4\" style=\"margin-right: 15px;\">\n       </fc-counter-circle>\n       <span style=\"font-size: 22px;\">Phase 2</span>\n     </section>\n     <div part=\"content\">\n     </div>\n   </fc-accordion-section>\n</fc-accordion>\n```",
+      "jsDoc": "/**\n * An element by Forter\n * <!-- Author: Omer Anati <[e-mail]> -->\n *\n * ## Usage\n *\n * ```html\n * <script>\n *   import '@forter/accordion';\n * </script>\n *\n * <fc-accordion>\n *   <fc-accordion-category label=\"galaxy\">\n *     S10\n *     S20\n *   </fc-accordion-category>\n *   <fc-accordion-category label=\"iphone\">\n *     X\n *     XS\n *   </fc-accordion-category>\n * </fc-accordion>\n * ```\n *  * ## Examples\n *\n * ```html\n * <!-- section example open -->\n * <fc-accordion>\n *   <fc-accordion-section open>\n *     <section slot=\"label\" style=\"display: flex; align-items: center;\">\n *       <fc-counter-circle completed=\"2\" total=\"4\" style=\"margin-right: 15px;\">\n *       </fc-counter-circle>\n *       <span style=\"font-size: 22px;\">Integration Overview</span>\n *     </section>\n *     <div part=\"content\">\n *       <fc-card>\n *         Accordion Content\n *       </fc-card>\n *       <fc-card>\n *         Accordion Content\n *       </fc-card>\n *     </div>\n *   </fc-accordion-section>\n * </fc-accordion>\n *\n * <!-- section example -->\n * <fc-accordion>\n *   <fc-accordion-section>\n *     <section slot=\"label\" style=\"display: flex; align-items: center;\">\n *       <fc-counter-circle completed=\"12\" total=\"16\" style=\"margin-right: 15px;\">\n *       </fc-counter-circle>\n *       <span style=\"font-size: 22px;\">Phase 1</span>\n *     </section>\n *     <div part=\"content\">\n *       <fc-card>\n *         Accordion Content\n *       </fc-card>\n *       <fc-card>\n *         Accordion Content\n *       </fc-card>\n *     </div>\n *   </fc-accordion-section>\n * </fc-accordion>\n *\n * <!-- disabled section example -->\n * <fc-accordion>\n *   <fc-accordion-section disabled>\n *     <section slot=\"label\" style=\"display: flex; align-items: center;\">\n *       <fc-counter-circle completed=\"0\" total=\"4\" style=\"margin-right: 15px;\">\n *       </fc-counter-circle>\n *       <span style=\"font-size: 22px;\">Phase 2</span>\n *     </section>\n *     <div part=\"content\">\n *     </div>\n *   </fc-accordion-section>\n * </fc-accordion>\n * ```\n *\n * @element fc-accordion\n * @cssprop --fc-accordion-section-open-background-color - open background color. example: `var(--indigo-1)`\n * @cssprop --fc-accordion-section-border-radius - border-radius. example: `10px`\n * @cssprop --fc-accordion-section-border-color - border color. example: `var(--cyan-2)`\n * @cssprop --fc-accordion-section-font-color - header font color. example: `var(--indigo-9)`\n * @cssprop --fc-accordion-section-background-color - header background color. example: `var(--pink-1)`\n * @cssprop --fc-accordion-section-padding - section padding. example: `10px`\n * @cssprop --fc-accordion-section-disabled-color - disabled font color. example: `var(--red-1)`\n * @cssprop --fc-accordion-section-icon-color - arrow icon color. example: `var(--indigo-7)`\n */",
+      "cssProperties": [
+        {
+          "name": "--fc-accordion-section-icon-color",
+          "description": "arrow icon color. example: `var(--indigo-7)`"
+        },
+        {
+          "name": "--fc-accordion-section-disabled-color",
+          "description": "disabled font color. example: `var(--red-1)`"
+        },
+        {
+          "name": "--fc-accordion-section-padding",
+          "description": "section padding. example: `10px`"
+        },
+        {
+          "name": "--fc-accordion-section-background-color",
+          "description": "header background color. example: `var(--pink-1)`"
+        },
+        {
+          "name": "--fc-accordion-section-font-color",
+          "description": "header font color. example: `var(--indigo-9)`"
+        },
+        {
+          "name": "--fc-accordion-section-border-color",
+          "description": "border color. example: `var(--cyan-2)`"
+        },
+        {
+          "name": "--fc-accordion-section-border-radius",
+          "description": "border-radius. example: `10px`"
+        },
+        {
+          "name": "--fc-accordion-section-open-background-color",
+          "description": "open background color. example: `var(--indigo-1)`"
+        }
+      ]
     }
   ]
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

99584

increased by72.32%

Number of package files

49

increased by44.12%

Lines of code

1632

increased by65.85%

Number of lines in readme file

91

increased by279.17%

No dependency changes