@sbb-esta/lyne-react-dev 0.0.0 → 4.5.1-dev.1771849279

package/README.md

@@ -0,0 +1,55 @@
+# Lyne Components
+
+> Lyne Components are the building blocks of the Lyne Design System
+> and are based on standard compliant Web Components
+> created using [Lit](https://lit.dev/) and
+> browsable through [Storybook](https://lyne-storybook.app.sbb.ch/)
+
+## 🎯 Our aim
+
+To fulfill our [Vision](./docs/VISION.md), we are building and maintaining Lyne, our Design System, which is and acts
+as our common language — our Single Source of Truth.
+For this purpose we use [Design Tokens](https://github.com/sbb-design-systems/lyne-design-tokens) as our design abstractions.
+Those [Design Tokens](https://github.com/sbb-design-systems/lyne-design-tokens) are consumed by Lyne Components and are integrated within our documentation.
+
+Lyne Design Tokens and Lyne Components are available for developers and designers.
+
+## 📚 Documentation
+
+- General docs: [digital.sbb.ch](https://digital.sbb.ch)
+- Component docs: [Storybook](https://lyne-storybook.app.sbb.ch)
+- [Getting started guide](./docs/GETTING_STARTED.md)
+
+## 🔗 Packages
+
+| Package                                | Description                                                                 |
+| -------------------------------------- | --------------------------------------------------------------------------- |
+| `@sbb-esta/lyne-elements`              | Web components built on top of the Lyne Design System                       |
+| `@sbb-esta/lyne-elements-experimental` | Web components that do not yet align with our architecture or testing goals |
+| `@sbb-esta/lyne-react`                 | React wrappers for `@sbb-esta/lyne-elements`                                |
+| `@sbb-esta/lyne-react-experimental`    | React wrappers for `@sbb-esta/lyne-elements-experimental`                   |
+
+- [NPM Packages](https://www.npmjs.com/search?q=%40sbb-esta%2Flyne-)
+
+## 🖥 Browser and screen reader support
+
+This library supports the most recent two versions of all major browsers: Chrome (including Android), Firefox, Safari (including iOS), and Edge.
+
+We aim for great user experience with the following screen readers:
+
+Windows: NVDA and JAWS with FF / Chrome.
+macOS: VoiceOver with Safari / Chrome.
+iOS: VoiceOver with Safari
+Android: Android Accessibility Suite (formerly TalkBack) with Chrome.
+
+## 🙌 Contributing
+
+- [General contribution guide](./docs/CONTRIBUTING.md)
+- [Developer guide](./docs/DEVELOPER.md) for developers to get started working with this repo.
+- [Coding standards](./docs/CODING_STANDARDS.md) for developers.
+- [Code of conduct](./docs/CODE_OF_CONDUCT.md)
+
+## 📝 License
+
+This software is published by SBB-CFF-FFS under the [MIT](/LICENSE) licence and unsupported unless otherwise clearly stated.
+Use at your own risk.

package/accordion/accordion.component.js

@@ -0,0 +1,11 @@
+import { createComponent as o } from "../core.js";
+import { SbbAccordionElement as r } from "@sbb-esta/lyne-elements/accordion.js";
+import e from "react";
+const n = o({
+  tagName: "sbb-accordion",
+  elementClass: r,
+  react: e
+});
+export {
+  n as SbbAccordion
+};

package/accordion.js

@@ -0,0 +1,4 @@
+import { SbbAccordion as b } from "./accordion/accordion.component.js";
+export {
+  b as SbbAccordion
+};

package/action-group/action-group.component.js

@@ -0,0 +1,11 @@
+import { createComponent as o } from "../core.js";
+import { SbbActionGroupElement as t } from "@sbb-esta/lyne-elements/action-group.js";
+import r from "react";
+const p = o({
+  tagName: "sbb-action-group",
+  elementClass: t,
+  react: r
+});
+export {
+  p as SbbActionGroup
+};

package/action-group.js

@@ -0,0 +1,4 @@
+import { SbbActionGroup as b } from "./action-group/action-group.component.js";
+export {
+  b as SbbActionGroup
+};

package/alert/alert/alert.component.js

@@ -0,0 +1,17 @@
+import { createComponent as e } from "../../core.js";
+import { SbbAlertElement as o } from "@sbb-esta/lyne-elements/alert/alert.js";
+import r from "react";
+const m = e({
+  tagName: "sbb-alert",
+  elementClass: o,
+  react: r,
+  events: {
+    onBeforeopen: "beforeopen",
+    onOpen: "open",
+    onBeforeclose: "beforeclose",
+    onClose: "close"
+  }
+});
+export {
+  m as SbbAlert
+};

package/alert/alert-group/alert-group.component.js

@@ -0,0 +1,14 @@
+import { createComponent as e } from "../../core.js";
+import { SbbAlertGroupElement as t } from "@sbb-esta/lyne-elements/alert/alert-group.js";
+import r from "react";
+const n = e({
+  tagName: "sbb-alert-group",
+  elementClass: t,
+  react: r,
+  events: {
+    onEmpty: "empty"
+  }
+});
+export {
+  n as SbbAlertGroup
+};

package/alert/alert-group.js

@@ -0,0 +1,4 @@
+import { SbbAlertGroup as b } from "./alert-group/alert-group.component.js";
+export {
+  b as SbbAlertGroup
+};

package/alert/alert.js

@@ -0,0 +1,4 @@
+import { SbbAlert as e } from "./alert/alert.component.js";
+export {
+  e as SbbAlert
+};

package/alert.js

@@ -0,0 +1,6 @@
+import { SbbAlert as b } from "./alert/alert/alert.component.js";
+import { SbbAlertGroup as t } from "./alert/alert-group/alert-group.component.js";
+export {
+  b as SbbAlert,
+  t as SbbAlertGroup
+};

package/autocomplete/autocomplete.component.js

@@ -0,0 +1,17 @@
+import { createComponent as e } from "../core.js";
+import { SbbAutocompleteElement as o } from "@sbb-esta/lyne-elements/autocomplete.js";
+import t from "react";
+const n = o, c = e({
+  tagName: "sbb-autocomplete",
+  elementClass: n,
+  react: t,
+  events: {
+    onBeforeopen: "beforeopen",
+    onOpen: "open",
+    onBeforeclose: "beforeclose",
+    onClose: "close"
+  }
+});
+export {
+  c as SbbAutocomplete
+};

package/autocomplete.js

@@ -0,0 +1,4 @@
+import { SbbAutocomplete as t } from "./autocomplete/autocomplete.component.js";
+export {
+  t as SbbAutocomplete
+};

package/breadcrumb/breadcrumb/breadcrumb.component.js

@@ -0,0 +1,11 @@
+import { createComponent as r } from "../../core.js";
+import { SbbBreadcrumbElement as e } from "@sbb-esta/lyne-elements/breadcrumb/breadcrumb.js";
+import m from "react";
+const a = r({
+  tagName: "sbb-breadcrumb",
+  elementClass: e,
+  react: m
+});
+export {
+  a as SbbBreadcrumb
+};

package/breadcrumb/breadcrumb-group/breadcrumb-group.component.js

@@ -0,0 +1,11 @@
+import { createComponent as r } from "../../core.js";
+import { SbbBreadcrumbGroupElement as e } from "@sbb-esta/lyne-elements/breadcrumb/breadcrumb-group.js";
+import m from "react";
+const a = r({
+  tagName: "sbb-breadcrumb-group",
+  elementClass: e,
+  react: m
+});
+export {
+  a as SbbBreadcrumbGroup
+};

package/breadcrumb/breadcrumb-group.js

@@ -0,0 +1,4 @@
+import { SbbBreadcrumbGroup as o } from "./breadcrumb-group/breadcrumb-group.component.js";
+export {
+  o as SbbBreadcrumbGroup
+};

package/breadcrumb/breadcrumb.js

@@ -0,0 +1,4 @@
+import { SbbBreadcrumb as e } from "./breadcrumb/breadcrumb.component.js";
+export {
+  e as SbbBreadcrumb
+};

package/breadcrumb.js

@@ -0,0 +1,6 @@
+import { SbbBreadcrumb as o } from "./breadcrumb/breadcrumb/breadcrumb.component.js";
+import { SbbBreadcrumbGroup as m } from "./breadcrumb/breadcrumb-group/breadcrumb-group.component.js";
+export {
+  o as SbbBreadcrumb,
+  m as SbbBreadcrumbGroup
+};

package/button/accent-button/accent-button.component.js

@@ -0,0 +1,11 @@
+import { createComponent as t } from "../../core.js";
+import { SbbAccentButtonElement as o } from "@sbb-esta/lyne-elements/button/accent-button.js";
+import e from "react";
+const n = o, r = t({
+  tagName: "sbb-accent-button",
+  elementClass: n,
+  react: e
+});
+export {
+  r as SbbAccentButton
+};

package/button/accent-button-link/accent-button-link.component.js

@@ -0,0 +1,11 @@
+import { createComponent as t } from "../../core.js";
+import { SbbAccentButtonLinkElement as e } from "@sbb-esta/lyne-elements/button/accent-button-link.js";
+import n from "react";
+const r = t({
+  tagName: "sbb-accent-button-link",
+  elementClass: e,
+  react: n
+});
+export {
+  r as SbbAccentButtonLink
+};

package/button/accent-button-link.js

@@ -0,0 +1,4 @@
+import { SbbAccentButtonLink as o } from "./accent-button-link/accent-button-link.component.js";
+export {
+  o as SbbAccentButtonLink
+};

package/button/accent-button-static/accent-button-static.component.js

@@ -0,0 +1,11 @@
+import { createComponent as t } from "../../core.js";
+import { SbbAccentButtonStaticElement as e } from "@sbb-esta/lyne-elements/button/accent-button-static.js";
+import o from "react";
+const a = t({
+  tagName: "sbb-accent-button-static",
+  elementClass: e,
+  react: o
+});
+export {
+  a as SbbAccentButtonStatic
+};

package/button/accent-button-static.js

@@ -0,0 +1,4 @@
+import { SbbAccentButtonStatic as o } from "./accent-button-static/accent-button-static.component.js";
+export {
+  o as SbbAccentButtonStatic
+};

package/button/accent-button.js

@@ -0,0 +1,4 @@
+import { SbbAccentButton as b } from "./accent-button/accent-button.component.js";
+export {
+  b as SbbAccentButton
+};

package/button/button/button.component.js

@@ -0,0 +1,11 @@
+import { createComponent as t } from "../../core.js";
+import { SbbButtonElement as o } from "@sbb-esta/lyne-elements/button/button.js";
+import e from "react";
+const n = o, p = t({
+  tagName: "sbb-button",
+  elementClass: n,
+  react: e
+});
+export {
+  p as SbbButton
+};

package/button/button-link/button-link.component.js

@@ -0,0 +1,11 @@
+import { createComponent as t } from "../../core.js";
+import { SbbButtonLinkElement as o } from "@sbb-esta/lyne-elements/button/button-link.js";
+import e from "react";
+const b = t({
+  tagName: "sbb-button-link",
+  elementClass: o,
+  react: e
+});
+export {
+  b as SbbButtonLink
+};

package/button/button-link.js

@@ -0,0 +1,4 @@
+import { SbbButtonLink as b } from "./button-link/button-link.component.js";
+export {
+  b as SbbButtonLink
+};

package/button/button-static/button-static.component.js

@@ -0,0 +1,11 @@
+import { createComponent as t } from "../../core.js";
+import { SbbButtonStaticElement as o } from "@sbb-esta/lyne-elements/button/button-static.js";
+import e from "react";
+const n = t({
+  tagName: "sbb-button-static",
+  elementClass: o,
+  react: e
+});
+export {
+  n as SbbButtonStatic
+};

package/button/button-static.js

@@ -0,0 +1,4 @@
+import { SbbButtonStatic as b } from "./button-static/button-static.component.js";
+export {
+  b as SbbButtonStatic
+};

package/button/button.js

@@ -0,0 +1,4 @@
+import { SbbButton as b } from "./button/button.component.js";
+export {
+  b as SbbButton
+};

package/button/mini-button/mini-button.component.js

@@ -0,0 +1,11 @@
+import { createComponent as t } from "../../core.js";
+import { SbbMiniButtonElement as o } from "@sbb-esta/lyne-elements/button/mini-button.js";
+import n from "react";
+const e = o, r = t({
+  tagName: "sbb-mini-button",
+  elementClass: e,
+  react: n
+});
+export {
+  r as SbbMiniButton
+};

package/button/mini-button-group/mini-button-group.component.js

@@ -0,0 +1,11 @@
+import { createComponent as t } from "../../core.js";
+import { SbbMiniButtonGroupElement as o } from "@sbb-esta/lyne-elements/button/mini-button-group.js";
+import r from "react";
+const i = t({
+  tagName: "sbb-mini-button-group",
+  elementClass: o,
+  react: r
+});
+export {
+  i as SbbMiniButtonGroup
+};

package/button/mini-button-group.js

@@ -0,0 +1,4 @@
+import { SbbMiniButtonGroup as t } from "./mini-button-group/mini-button-group.component.js";
+export {
+  t as SbbMiniButtonGroup
+};

package/button/mini-button-link/mini-button-link.component.js

@@ -0,0 +1,11 @@
+import { createComponent as t } from "../../core.js";
+import { SbbMiniButtonLinkElement as n } from "@sbb-esta/lyne-elements/button/mini-button-link.js";
+import o from "react";
+const r = t({
+  tagName: "sbb-mini-button-link",
+  elementClass: n,
+  react: o
+});
+export {
+  r as SbbMiniButtonLink
+};

package/button/mini-button-link.js

@@ -0,0 +1,4 @@
+import { SbbMiniButtonLink as o } from "./mini-button-link/mini-button-link.component.js";
+export {
+  o as SbbMiniButtonLink
+};

package/button/mini-button.js

@@ -0,0 +1,4 @@
+import { SbbMiniButton as b } from "./mini-button/mini-button.component.js";
+export {
+  b as SbbMiniButton
+};

package/button/secondary-button/secondary-button.component.js

@@ -0,0 +1,11 @@
+import { createComponent as o } from "../../core.js";
+import { SbbSecondaryButtonElement as t } from "@sbb-esta/lyne-elements/button/secondary-button.js";
+import e from "react";
+const n = t, b = o({
+  tagName: "sbb-secondary-button",
+  elementClass: n,
+  react: e
+});
+export {
+  b as SbbSecondaryButton
+};

package/button/secondary-button-link/secondary-button-link.component.js

@@ -0,0 +1,11 @@
+import { createComponent as t } from "../../core.js";
+import { SbbSecondaryButtonLinkElement as o } from "@sbb-esta/lyne-elements/button/secondary-button-link.js";
+import e from "react";
+const a = t({
+  tagName: "sbb-secondary-button-link",
+  elementClass: o,
+  react: e
+});
+export {
+  a as SbbSecondaryButtonLink
+};

package/button/secondary-button-link.js

@@ -0,0 +1,4 @@
+import { SbbSecondaryButtonLink as r } from "./secondary-button-link/secondary-button-link.component.js";
+export {
+  r as SbbSecondaryButtonLink
+};

package/button/secondary-button-static/secondary-button-static.component.js

@@ -0,0 +1,11 @@
+import { createComponent as t } from "../../core.js";
+import { SbbSecondaryButtonStaticElement as o } from "@sbb-esta/lyne-elements/button/secondary-button-static.js";
+import e from "react";
+const m = t({
+  tagName: "sbb-secondary-button-static",
+  elementClass: o,
+  react: e
+});
+export {
+  m as SbbSecondaryButtonStatic
+};

package/button/secondary-button-static.js

@@ -0,0 +1,4 @@
+import { SbbSecondaryButtonStatic as r } from "./secondary-button-static/secondary-button-static.component.js";
+export {
+  r as SbbSecondaryButtonStatic
+};

package/button/secondary-button.js

@@ -0,0 +1,4 @@
+import { SbbSecondaryButton as t } from "./secondary-button/secondary-button.component.js";
+export {
+  t as SbbSecondaryButton
+};

package/button/transparent-button/transparent-button.component.js

@@ -0,0 +1,11 @@
+import { createComponent as t } from "../../core.js";
+import { SbbTransparentButtonElement as n } from "@sbb-esta/lyne-elements/button/transparent-button.js";
+import o from "react";
+const r = n, p = t({
+  tagName: "sbb-transparent-button",
+  elementClass: r,
+  react: o
+});
+export {
+  p as SbbTransparentButton
+};

package/button/transparent-button-link/transparent-button-link.component.js

@@ -0,0 +1,11 @@
+import { createComponent as t } from "../../core.js";
+import { SbbTransparentButtonLinkElement as n } from "@sbb-esta/lyne-elements/button/transparent-button-link.js";
+import r from "react";
+const m = t({
+  tagName: "sbb-transparent-button-link",
+  elementClass: n,
+  react: r
+});
+export {
+  m as SbbTransparentButtonLink
+};

package/button/transparent-button-link.js

@@ -0,0 +1,4 @@
+import { SbbTransparentButtonLink as t } from "./transparent-button-link/transparent-button-link.component.js";
+export {
+  t as SbbTransparentButtonLink
+};

package/button/transparent-button-static/transparent-button-static.component.js

@@ -0,0 +1,11 @@
+import { createComponent as t } from "../../core.js";
+import { SbbTransparentButtonStaticElement as r } from "@sbb-esta/lyne-elements/button/transparent-button-static.js";
+import a from "react";
+const m = t({
+  tagName: "sbb-transparent-button-static",
+  elementClass: r,
+  react: a
+});
+export {
+  m as SbbTransparentButtonStatic
+};

package/button/transparent-button-static.js

@@ -0,0 +1,4 @@
+import { SbbTransparentButtonStatic as a } from "./transparent-button-static/transparent-button-static.component.js";
+export {
+  a as SbbTransparentButtonStatic
+};

package/button/transparent-button.js

@@ -0,0 +1,4 @@
+import { SbbTransparentButton as n } from "./transparent-button/transparent-button.component.js";
+export {
+  n as SbbTransparentButton
+};

package/button.js

@@ -0,0 +1,32 @@
+import { SbbAccentButton as r } from "./button/accent-button/accent-button.component.js";
+import { SbbAccentButtonLink as b } from "./button/accent-button-link/accent-button-link.component.js";
+import { SbbAccentButtonStatic as S } from "./button/accent-button-static/accent-button-static.component.js";
+import { SbbButton as u } from "./button/button/button.component.js";
+import { SbbButtonLink as i } from "./button/button-link/button-link.component.js";
+import { SbbButtonStatic as x } from "./button/button-static/button-static.component.js";
+import { SbbMiniButton as a } from "./button/mini-button/mini-button.component.js";
+import { SbbMiniButtonGroup as k } from "./button/mini-button-group/mini-button-group.component.js";
+import { SbbMiniButtonLink as d } from "./button/mini-button-link/mini-button-link.component.js";
+import { SbbSecondaryButton as y } from "./button/secondary-button/secondary-button.component.js";
+import { SbbSecondaryButtonLink as M } from "./button/secondary-button-link/secondary-button-link.component.js";
+import { SbbSecondaryButtonStatic as G } from "./button/secondary-button-static/secondary-button-static.component.js";
+import { SbbTransparentButton as h } from "./button/transparent-button/transparent-button.component.js";
+import { SbbTransparentButtonLink as l } from "./button/transparent-button-link/transparent-button-link.component.js";
+import { SbbTransparentButtonStatic as v } from "./button/transparent-button-static/transparent-button-static.component.js";
+export {
+  r as SbbAccentButton,
+  b as SbbAccentButtonLink,
+  S as SbbAccentButtonStatic,
+  u as SbbButton,
+  i as SbbButtonLink,
+  x as SbbButtonStatic,
+  a as SbbMiniButton,
+  k as SbbMiniButtonGroup,
+  d as SbbMiniButtonLink,
+  y as SbbSecondaryButton,
+  M as SbbSecondaryButtonLink,
+  G as SbbSecondaryButtonStatic,
+  h as SbbTransparentButton,
+  l as SbbTransparentButtonLink,
+  v as SbbTransparentButtonStatic
+};

package/calendar/calendar.component.js

@@ -0,0 +1,14 @@
+import { createComponent as e } from "../core.js";
+import { SbbCalendarElement as t } from "@sbb-esta/lyne-elements/calendar.js";
+import a from "react";
+const n = e({
+  tagName: "sbb-calendar",
+  elementClass: t,
+  react: a,
+  events: {
+    onDateselected: "dateselected"
+  }
+});
+export {
+  n as SbbCalendar
+};

package/calendar.js

@@ -0,0 +1,4 @@
+import { SbbCalendar as b } from "./calendar/calendar.component.js";
+export {
+  b as SbbCalendar
+};

package/card/card/card.component.js

@@ -0,0 +1,11 @@
+import { createComponent as r } from "../../core.js";
+import { SbbCardElement as e } from "@sbb-esta/lyne-elements/card/card.js";
+import t from "react";
+const b = r({
+  tagName: "sbb-card",
+  elementClass: e,
+  react: t
+});
+export {
+  b as SbbCard
+};

package/card/card-badge/card-badge.component.js

@@ -0,0 +1,11 @@
+import { createComponent as e } from "../../core.js";
+import { SbbCardBadgeElement as r } from "@sbb-esta/lyne-elements/card/card-badge.js";
+import a from "react";
+const b = e({
+  tagName: "sbb-card-badge",
+  elementClass: r,
+  react: a
+});
+export {
+  b as SbbCardBadge
+};

package/card/card-badge.js

@@ -0,0 +1,4 @@
+import { SbbCardBadge as b } from "./card-badge/card-badge.component.js";
+export {
+  b as SbbCardBadge
+};

package/card/card-button/card-button.component.js

@@ -0,0 +1,11 @@
+import { createComponent as t } from "../../core.js";
+import { SbbCardButtonElement as o } from "@sbb-esta/lyne-elements/card/card-button.js";
+import r from "react";
+const e = o, b = t({
+  tagName: "sbb-card-button",
+  elementClass: e,
+  react: r
+});
+export {
+  b as SbbCardButton
+};

package/card/card-button.js

@@ -0,0 +1,4 @@
+import { SbbCardButton as t } from "./card-button/card-button.component.js";
+export {
+  t as SbbCardButton
+};

package/card/card-link/card-link.component.js

@@ -0,0 +1,11 @@
+import { createComponent as r } from "../../core.js";
+import { SbbCardLinkElement as e } from "@sbb-esta/lyne-elements/card/card-link.js";
+import t from "react";
+const n = r({
+  tagName: "sbb-card-link",
+  elementClass: e,
+  react: t
+});
+export {
+  n as SbbCardLink
+};

package/card/card-link.js

@@ -0,0 +1,4 @@
+import { SbbCardLink as o } from "./card-link/card-link.component.js";
+export {
+  o as SbbCardLink
+};

package/card/card.js

@@ -0,0 +1,4 @@
+import { SbbCard as o } from "./card/card.component.js";
+export {
+  o as SbbCard
+};

package/card.js

@@ -0,0 +1,10 @@
+import { SbbCard as b } from "./card/card/card.component.js";
+import { SbbCardBadge as a } from "./card/card-badge/card-badge.component.js";
+import { SbbCardButton as e } from "./card/card-button/card-button.component.js";
+import { SbbCardLink as m } from "./card/card-link/card-link.component.js";
+export {
+  b as SbbCard,
+  a as SbbCardBadge,
+  e as SbbCardButton,
+  m as SbbCardLink
+};