agnostic-svelte - npm Package Compare versions

Comparing version 1.0.3-15 to 1.0.3-16

package.json

 {
   "name": "agnostic-svelte",
-  "version": "1.0.3-15",
+  "version": "1.0.3-16",
   "description": "AgnosticUI (svelte)",
@@ -38,3 +38,3 @@ "author": "Rob Levin <[e-mail]>",
     "syncStyles": "node copystyles.js",
-    "format": "yarn run prettier --write './src/**/*.{js,svelte,md,html,css,json}'",
+    "format": "yarn run prettier --write './src/**/*.{js,svelte,md,html,json}'",
     "prelint": "yarn run format",
@@ -41,0 +41,0 @@ "lint": "eslint './src/**/*.{js,svelte}'",

src/stories/Button.stories.js

@@ -26,2 +26,4 @@ import ButtonSlot from "./ButtonSlot.svelte";
     isSkinned: { control: "boolean" },
+    isBlank: { control: "boolean" },
+    isLink: { control: "boolean" },
     size: {
@@ -195,2 +197,13 @@ control: { type: "select", options: ["small", "large"] },
 
+export const ButtonLink = Template.bind({});
+ButtonLink.args = {
+  isLink: true,
+};
+
+export const ButtonLinkUnskinned = Template.bind({});
+ButtonLinkUnskinned.args = {
+  isLink: true,
+  isSkinned: false,
+};
+
 export const ButtonBase = Template.bind({});
@@ -197,0 +210,0 @@ ButtonBase.args = {

src/stories/Tabs.stories.js

@@ -9,5 +9,5 @@ import Tabs from "./Tabs.svelte";
 import Tab3 from "./TabPanel3.svelte";
-import TabButton1 from "./TabButton1.svelte";
-import TabButton2 from "./TabButton2.svelte";
-import TabButton3 from "./TabButton3.svelte";
+import Tab4 from "./TabPanel4.svelte";
+import Tab5 from "./TabPanel5.svelte";
+import TabButtonCustom from "./TabButtonCustom.svelte";
 
@@ -29,2 +29,3 @@ export default {
       title: "Tab 1",
+      ariaControls: "panel-1",
       tabPanelComponent: Tab1,
@@ -34,2 +35,3 @@ },
       title: "Tab 2",
+      ariaControls: "panel-2",
       tabPanelComponent: Tab2,
@@ -39,2 +41,3 @@ },
       title: "Tab 3",
+      ariaControls: "panel-3",
       tabPanelComponent: Tab3,
@@ -51,2 +54,3 @@ },
       title: "Tab 1",
+      ariaControls: "panel-1",
       tabPanelComponent: Tab1,
@@ -56,2 +60,3 @@ },
       title: "Tab 2",
+      ariaControls: "panel-2",
       tabPanelComponent: Tab2,
@@ -61,2 +66,3 @@ },
       title: "Tab 3",
+      ariaControls: "panel-3",
       tabPanelComponent: Tab3,
@@ -67,8 +73,9 @@ },
 
-export const TabsJumbo = Template.bind({});
-TabsJumbo.args = {
-  size: "jumbo",
+export const Tabsxlarge = Template.bind({});
+Tabsxlarge.args = {
+  size: "xlarge",
   tabs: [
     {
       title: "Tab 1",
+      ariaControls: "panel-1",
       tabPanelComponent: Tab1,
@@ -78,2 +85,3 @@ },
       title: "Tab 2",
+      ariaControls: "panel-2",
       tabPanelComponent: Tab2,
@@ -83,2 +91,3 @@ },
       title: "Tab 3",
+      ariaControls: "panel-3",
       tabPanelComponent: Tab3,
@@ -95,2 +104,3 @@ },
       title: "Tab 1",
+      ariaControls: "panel-1",
       tabPanelComponent: Tab1,
@@ -100,2 +110,3 @@ },
       title: "Tab 2",
+      ariaControls: "panel-2",
       tabPanelComponent: Tab2,
@@ -105,2 +116,3 @@ },
       title: "Tab 3",
+      ariaControls: "panel-3",
       tabPanelComponent: Tab3,
@@ -112,6 +124,7 @@ },
 TabsDisabledOptions.args = {
-  disabledOptions: ["Tab 1", "Tab 3"],
+  disabledOptions: ["Tab 2", "Tab 4"],
   tabs: [
     {
       title: "Tab 1",
+      ariaControls: "panel-1",
       tabPanelComponent: Tab1,
@@ -121,2 +134,3 @@ },
       title: "Tab 2",
+      ariaControls: "panel-2",
       tabPanelComponent: Tab2,
@@ -126,4 +140,15 @@ },
       title: "Tab 3",
+      ariaControls: "panel-3",
       tabPanelComponent: Tab3,
     },
+    {
+      title: "Tab 4",
+      ariaControls: "panel-4",
+      tabPanelComponent: Tab4,
+    },
+    {
+      title: "Tab 5",
+      ariaControls: "panel-5",
+      tabPanelComponent: Tab5,
+    },
   ],
@@ -133,2 +158,20 @@ };
 // See ./TabButtonCustom.svelte for an example on how to setup your custom tab buttons.
+// It is a bit complex due to preserving the keyboard navigation for accessibility. To
+// do this, the Tabs library needs to obtain "refs" to the tab buttons which we do with:
+// svelte:component
+//   this="{tab.tabButtonComponent}"
+//   bind:this={dynamicComponentRefs[i]}
+//   ...
+// So we're dynamically instantiating the custom tab button and storing a reference in
+// dynamicComponentRefs array. Later, when we're managing keyboard navigation based focus,
+// we need to somehow call isDisabled and focus methods on those references. Hence, the
+// complexity required -- the custom tab button must bind the raw <button bind:this={btn}
+// and then support those methods:
+// let btn;
+// export function focus() {
+//   return btn.focus();
+// }
+// export function isDisabled () {
+//   return btn.disabled;
+// }
 export const CustomTabButtons = Template.bind({});
@@ -140,3 +183,4 @@ CustomTabButtons.args = {
       title: "Tab 1",
-      tabButtonComponent: TabButton1,
+      ariaControls: "panel-1",
+      tabButtonComponent: TabButtonCustom,
       tabPanelComponent: Tab1,
@@ -146,3 +190,4 @@ },
       title: "Tab 2",
-      tabButtonComponent: TabButton2,
+      ariaControls: "panel-2",
+      tabButtonComponent: TabButtonCustom,
       tabPanelComponent: Tab2,
@@ -152,3 +197,4 @@ },
       title: "Tab 3",
-      tabButtonComponent: TabButton3,
+      ariaControls: "panel-3",
+      tabButtonComponent: TabButtonCustom,
       tabPanelComponent: Tab3,
@@ -155,0 +201,0 @@ },

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

422601

increased by33.65%

Number of package files

71

increased by47.92%

Lines of code

4935

increased by14.85%

No dependency changes