Giter Site home page Giter Site logo

db-ui / elements Goto Github PK

View Code? Open in Web Editor NEW
38.0 38.0 8.0 338.64 MB

Web Components, based on DB UI Core.

Home Page: https://db-ui.github.io/elements/

License: Apache License 2.0

JavaScript 14.18% HTML 4.20% TypeScript 56.22% SCSS 1.49% CSS 3.50% Vue 2.15% MDX 18.26%
angular hacktoberfest javascript react vue

elements's People

Contributors

annsch avatar d-koppenhagen avatar dependabot[bot] avatar dkolba avatar ffflorian avatar github-actions[bot] avatar mfranzke avatar nmerget avatar pschaub avatar stefma avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar

Forkers

stefma nmerget ewatch mfranzke d-koppenhagen pschaub itsuj flipswitchingmonkey

elements's Issues

Missing referenced icons

Icons within components (db-input[type=search] and db-select) are referenced by a path, that's relative to the pages path instead of CSS path, as we're inlining the CSS for the Custom Elements.

That for the easiest and most stable is to include these icons base64 encoded. We shouldn't implement this in DB UI Core directly, as we'd still like to reference all the assets in there in general, but only include it as base64 for the specific use case of inlined CSS by DB UI Elements.

Docs: optimize Vanilla JavaScript installation

The Vanilla JavaScript part of the installation guide includes the following paragraph:

You can use one of the following links to find the description for the framework you use.

NOTE: If you need a loader path to import 'defineCustomElements' or 'applyPolyfills', you have to use: "@db-ui/elements/loader".

Integration JavaScript
For integration in other framworks visit Stencil Doc- Overview Framework Integration for more informations.

This could be a little bit misleading, as it's a mix and match in between the chosen documentation (on JavaScript specifically / without a framework) and mentioning a list of framework links. Just removing "You can use one of the following links to find the description for the framework you use." might not do the trick, as we should set the linked documentation by StencilJS team in context (e.g. not necessarily referencing the framework from a public CDN, but our localhost installation), etc.

https://db-ui.github.io/elements/?path=/docs/intro-frameworks-javascript--page#integrate-web-components-in-your-app

Probably we should even also provide a Vanilla JS showcase.

Some review branch deployments aren't accessible

Some of the review branch deployments aren't accessible / are responding by a 404:

fix gh-pages build in cicd for release

At the moment the release version is not deployed to "/versions/vX.X.X".

Somehow the "/review/main" is updated, but the root public folder keeps the same.

db-link should have title prop?

is it not better to have title prop for db-link? Below for stencil

@Prop({ reflect: true }) title?: string;

  render() {
    return (
      <a
        class={'elm-link' + (this.icononly ? ' is-icon-text-replace' : '')}
        href={this.href}
        title={this.title}
        hreflang={this.hreflang}
        data-type={this.type}
        media={this.media}
        rel={this.rel}
        target={this.target}
        aria-current={this.current}
      >
        {this.icon ? (
          <db-icon icon={this.icon} variant={this.iconVariant} />
        ) : null}
        {this.text && this.text}
        {!this.text && <slot />}
      </a>
    );
  }

Within the Language-Switcher it is used with the title but i am not sure how it works without any prop defined?

image

Accordion: Adding property for getting/setting open state

We're currently missing the option/property to get / set the status of an accordion element being open.
Regarding the implementation within the component itself this could get achieved by toggling the attribute open on the details HTML element.

Mainnavigation: no default setting for an active item

We should mention that the site authors / component consumers would actively need to mark up one of the main navigation items as the active one as we couldn't determine it or even "just" define the first one as the default if none is defined, as this is totally up to the page or application it is integrated in.

We should even also mention the following aspects, that our developer colleagues would benefit from (at least for understanding the solution):

Example Angular: Set routerLink as directive on <db-link>. You'll retrieve the Active State out of the RouterLinkActive directive:

<db-mainnavigation>
  <db-link routerLink="/home" routerLinkActive #rlaHome="routerLinkActive" [current]="{ 'page' : rlaHome.isActive }">
    Startseite
  </db-link>
  <db-link routerLink="/about" routerLinkActive #rlaAbout="routerLinkActive" [current]="{ 'page' : rlaAbout.isActive }">
    About
  </db-link>
</db-mainnavigation>

main branch deployments

It looks like that builds out of the main branch don't get deployed to https://db-ui.github.io/elements/ (any more), whereas any of those changes merged to feature branches actually get deployed / displayed within the feature branch preview folder deployments, compare to e.g.:

Visual regression via Cypress

We'd like to use visual regression testing for Chromium, Webkit and Mozilla based Browsers, supported by Cypress.

fix issue with changelog for release

the changelog action works for prereleases, but the normal release changelog would be empty.

Can this be configured in conventional-changelog-cli?

Extend DbMainnavigationDataType with db-link props

DbMainnavigationDataType is responsible to generate db-link within the db-main-navigation but it doesnt have props as
title, target and icon

title: is used hower information like used for db-language-switcher
target is used whether to open link in seperate tab/window or default. It can be that some navigation item can navigate to an external page.
icon navigation items can be displayed with icons

Mainnavigation: Missing mobile version

The mainnavigation implementation is missing the label element next to the input which provides the "control" for the mobile version of the mainnavigation.

New TSC error 

../db-ui-elements-stencil/dist/types/components.d.ts:1190:15 - error TS2320: Interface 'HTMLDbNotificationElement' cannot simultaneously extend types 'DbNotification' and 'HTMLStencilElement'.
  Named property 'role' of types 'DbNotification' and 'HTMLStencilElement' are not identical.

1190     interface HTMLDbNotificationElement extends Components.DbNotification, HTMLStencilElement {
                   ~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error in ../db-ui-elements-stencil/dist/types/components.d.ts:1190

Optimize GitHub CI/CD

Modularize the different steps and cache the artifacts. Some complexity might result out of the playgrounds & showcases.

Set up consuming framework installations

We'd like to set up several framework installations – both by major version, and differences like compilers (e.g. vite and vue-cli) and ts / js installations – that are consuming our packages and have dependabot installed that especially updates our packages on their release; by this we would be able to detect any problems early after the release.
An alternative would be to integrate the creation of a tarball and installation during release process.

Accordion: Enable synched accordion interactions (configurable)

Regarding the accordion component we're currently missing the configurability for the component to either let the included different accordion elements behave individually or getting "synced" interactions by closing the open element in case that somebody opens another one ("typical accordion effect").

#386 might be a prerequisite for this issue.

Integrate done step

We'd like to have a done step within our pipeline that we could reference e.g. regarding steps to get fulfilled previous to an automatic merge.

db-link: Property `current` is not updated after changes

The property current is not updated when there are changes.

Reproducer

  1. yarn create react-app my-app --template typescript
  2. yarn add @db-ui/react-elements-enterprise
  3. Follow the Get started with React
  4. Add the following code to you App.tsx
// App.tsx
import "@db-ui/core/dist/css/db-ui-core.vars.css"
import {DbFooter, DbHeader, DbLink, DbMainnavigation, DbPage} from "@db-ui/react-elements-enterprise";
import {useState} from "react";

function App() {
    const [active, setActive] = useState(true);

    return (
        <>
            <DbPage>
                <DbHeader slot="header">
                    <button onClick={() => setActive(!active)}>Toggle</button>
                    <DbMainnavigation>
                        <DbLink href="/" key="key1" current={active ? "page" : "false"}>First</DbLink>
                        <DbLink href="/whatever" key="key2" current={active ? "false" : "page"}>Second</DbLink>
                    </DbMainnavigation>
                    <div/>
                </DbHeader>
                <DbFooter slot="footer" copyright border/>
            </DbPage>
        </>
    );
}

export default App;
  1. yarn start
  2. Press the button Toggle

Expected behaviour

The active page should toggle between "First" and "Second"

Fix Type Error in DbBreadcrumb

Updating to Angular 14.2.2 leads to type errors in DbBreadcrump due to inconsistency in optional parameters for ariaLabel.

Bildschirmfoto 2022-09-15 um 10 31 21

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.