feat(): update kitchen sink demo to Ionic 6 (#16)

ionic-team · Dec 13, 2021 · d47ad2c · d47ad2c
1 parent eb7dea5
commit d47ad2c
Show file tree

Hide file tree

Showing 13 changed files with 322 additions and 67 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,15 +9,16 @@
   ],
   "scripts": {
     "lint": "eslint src/ --ext .js,.ts,.jsx,.tsx",
-    "lint.fix": "lint -- --fix",
+    "lint.fix": "npm run lint -- --fix",
     "build": "stencil build",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate"
   },
   "dependencies": {
-    "@ionic/core": "^5.8.4"
+    "@ionic/core": "^6.0.0",
+    "date-fns": "^2.25.0"
   },
   "devDependencies": {
     "@stencil/core": "^2.9.0",

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -12,6 +12,8 @@ export namespace Components {
     }
     interface Component_template_ {
     }
+    interface ComponentAccordion {
+    }
     interface ComponentActionSheet {
     }
     interface ComponentAlert {
@@ -20,6 +22,8 @@ export namespace Components {
     }
     interface ComponentBadge {
     }
+    interface ComponentBreadcrumbs {
+    }
     interface ComponentButton {
     }
     interface ComponentCard {
@@ -130,6 +134,12 @@ declare global {
         prototype: HTMLComponent_template_Element;
         new (): HTMLComponent_template_Element;
     };
+    interface HTMLComponentAccordionElement extends Components.ComponentAccordion, HTMLStencilElement {
+    }
+    var HTMLComponentAccordionElement: {
+        prototype: HTMLComponentAccordionElement;
+        new (): HTMLComponentAccordionElement;
+    };
     interface HTMLComponentActionSheetElement extends Components.ComponentActionSheet, HTMLStencilElement {
     }
     var HTMLComponentActionSheetElement: {
@@ -154,6 +164,12 @@ declare global {
         prototype: HTMLComponentBadgeElement;
         new (): HTMLComponentBadgeElement;
     };
+    interface HTMLComponentBreadcrumbsElement extends Components.ComponentBreadcrumbs, HTMLStencilElement {
+    }
+    var HTMLComponentBreadcrumbsElement: {
+        prototype: HTMLComponentBreadcrumbsElement;
+        new (): HTMLComponentBreadcrumbsElement;
+    };
     interface HTMLComponentButtonElement extends Components.ComponentButton, HTMLStencilElement {
     }
     var HTMLComponentButtonElement: {
@@ -422,10 +438,12 @@ declare global {
         "app-home": HTMLAppHomeElement;
         "app-root": HTMLAppRootElement;
         "component-_template_": HTMLComponent_template_Element;
+        "component-accordion": HTMLComponentAccordionElement;
         "component-action-sheet": HTMLComponentActionSheetElement;
         "component-alert": HTMLComponentAlertElement;
         "component-avatar": HTMLComponentAvatarElement;
         "component-badge": HTMLComponentBadgeElement;
+        "component-breadcrumbs": HTMLComponentBreadcrumbsElement;
         "component-button": HTMLComponentButtonElement;
         "component-card": HTMLComponentCardElement;
         "component-checkbox": HTMLComponentCheckboxElement;
@@ -479,6 +497,8 @@ declare namespace LocalJSX {
     }
     interface Component_template_ {
     }
+    interface ComponentAccordion {
+    }
     interface ComponentActionSheet {
     }
     interface ComponentAlert {
@@ -487,6 +507,8 @@ declare namespace LocalJSX {
     }
     interface ComponentBadge {
     }
+    interface ComponentBreadcrumbs {
+    }
     interface ComponentButton {
     }
     interface ComponentCard {
@@ -581,10 +603,12 @@ declare namespace LocalJSX {
         "app-home": AppHome;
         "app-root": AppRoot;
         "component-_template_": Component_template_;
+        "component-accordion": ComponentAccordion;
         "component-action-sheet": ComponentActionSheet;
         "component-alert": ComponentAlert;
         "component-avatar": ComponentAvatar;
         "component-badge": ComponentBadge;
+        "component-breadcrumbs": ComponentBreadcrumbs;
         "component-button": ComponentButton;
         "component-card": ComponentCard;
         "component-checkbox": ComponentCheckbox;
@@ -638,10 +662,12 @@ declare module "@stencil/core" {
             "app-home": LocalJSX.AppHome & JSXBase.HTMLAttributes<HTMLAppHomeElement>;
             "app-root": LocalJSX.AppRoot & JSXBase.HTMLAttributes<HTMLAppRootElement>;
             "component-_template_": LocalJSX.Component_template_ & JSXBase.HTMLAttributes<HTMLComponent_template_Element>;
+            "component-accordion": LocalJSX.ComponentAccordion & JSXBase.HTMLAttributes<HTMLComponentAccordionElement>;
             "component-action-sheet": LocalJSX.ComponentActionSheet & JSXBase.HTMLAttributes<HTMLComponentActionSheetElement>;
             "component-alert": LocalJSX.ComponentAlert & JSXBase.HTMLAttributes<HTMLComponentAlertElement>;
             "component-avatar": LocalJSX.ComponentAvatar & JSXBase.HTMLAttributes<HTMLComponentAvatarElement>;
             "component-badge": LocalJSX.ComponentBadge & JSXBase.HTMLAttributes<HTMLComponentBadgeElement>;
+            "component-breadcrumbs": LocalJSX.ComponentBreadcrumbs & JSXBase.HTMLAttributes<HTMLComponentBreadcrumbsElement>;
             "component-button": LocalJSX.ComponentButton & JSXBase.HTMLAttributes<HTMLComponentButtonElement>;
             "component-card": LocalJSX.ComponentCard & JSXBase.HTMLAttributes<HTMLComponentCardElement>;
             "component-checkbox": LocalJSX.ComponentCheckbox & JSXBase.HTMLAttributes<HTMLComponentCheckboxElement>;

diff --git a/src/components/accordion/accordion.css b/src/components/accordion/accordion.css
diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
@@ -0,0 +1,82 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'component-accordion',
+  styleUrl: 'accordion.css'
+})
+export class Accordion {
+
+  render() {
+    const description = '<b>Accordions</b> provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information. All <code>ion-accordion</code> components should be grouped inside <code>ion-accordion-group</code> components.';
+    const url = 'accordion';
+
+    return [
+      <ion-header translucent={true}>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button defaultHref="/"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Accordion</ion-title>
+        </ion-toolbar>
+      </ion-header>,
+
+      <ion-content fullscreen class="component-content">
+        <component-details description={description} url={url}></component-details>
+
+        <ion-accordion-group>
+          <ion-accordion value="colors">
+            <ion-item slot="header">
+              <ion-label>Colors</ion-label>
+            </ion-item>
+
+            <ion-list slot="content">
+              <ion-item>
+                <ion-label>Red</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Green</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Blue</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+          <ion-accordion value="shapes">
+            <ion-item slot="header">
+              <ion-label>Shapes</ion-label>
+            </ion-item>
+
+            <ion-list slot="content">
+              <ion-item>
+                <ion-label>Circle</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Triangle</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Square</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+          <ion-accordion value="numbers">
+            <ion-item slot="header">
+              <ion-label>Numbers</ion-label>
+            </ion-item>
+
+            <ion-list slot="content">
+              <ion-item>
+                <ion-label>1</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>2</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>3</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+        </ion-accordion-group>
+      </ion-content>
+    ];
+  }
+}
diff --git a/src/components/app-home/app-home.e2e.ts b/src/components/app-home/app-home.e2e.ts
@@ -9,11 +9,11 @@ describe('app-home', () => {
     expect(element).toHaveClass('hydrated');
   });
 
-  it('contains an Action Sheet button', async () => {
+  it('contains an Accordion button', async () => {
     const page = await newE2EPage();
     await page.setContent('<app-home></app-home>');
 
     const element = await page.find('app-home .home-list ion-label');
-    expect(element.textContent).toEqual('Action Sheet');
+    expect(element.textContent).toEqual('Accordion');
   });
 });
diff --git a/src/components/breadcrumbs/breadcrumbs.css b/src/components/breadcrumbs/breadcrumbs.css
@@ -0,0 +1,7 @@
+ion-breadcrumbs.ios {
+  padding: 6px 8px;
+}
+
+ion-breadcrumbs.md {
+  padding: 0 4px;
+}