lyne-design-system / lyne-components Goto Github PK
View Code? Open in Web Editor NEWComponents for Lyne Design System
Home Page: https://lyne-storybook.app.sbb.ch
License: MIT License
Components for Lyne Design System
Home Page: https://lyne-storybook.app.sbb.ch
License: MIT License
Use this template if you want to request a new feature, or a change to an
existing feature.
If you are reporting a bug or problem, please use the bug or corresponding issue template instead.
Product subscription component
See Figma https://www.figma.com/file/oA9B5W6w0449gtItDzLS86/sbb.ch-%E2%80%93-Components?node-id=406%3A535841
According to WCAG standards, state changes shall not be communicated by color change only.
Per design, the button increases it's height by 2px on hover state. In our opinion, this is a visually hardly noticeable change. Could we improve the hover state with better visual difference to the default state?
lyne-components
non package issue
Broken component preview on documentation platform
The following components are not previewed correctly:
card-product
card-badge
journey-header
This module will let links appear in the visual formatting of a button.
lyne-components
non package issue
Describe in detail the issue you're having.
Is this issue related to a specific component?
What did you expect to happen? What happened instead? What would you like to
see changed?
What browser are you working in?
What version of the Lyne Design System are you using?
What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
Please create a reduced test case in CodeSandbox
Lyne footer component according to to the Figma design https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?node-id=820%3A546005
Everybody want's a footer ;)
Journey header component https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?node-id=2154%3A575279
lyne-components
non package issue
Describe in detail the issue you're having.
Is this issue related to a specific component?
What did you expect to happen? What happened instead? What would you like to
see changed?
What browser are you working in?
What version of the Lyne Design System are you using?
What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
Please create a reduced test case in CodeSandbox
Use this template if you want to request a new feature, or a change to an
existing feature.
If you are reporting a bug or problem, please use the bug or corresponding issue template instead.
Please describe your request in one or two sentences.
Clarify if you are asking for design, development, or both design and
development.
Provide the business reasons for this request.
Describe the full user experience for this feature. Also define the metrics by
which we can measure success/failure for the user.
Highlight any "must have" needs and functionality for the request.
This should not be a full list of functionality; the Lyne team will work with
you to define functionality based on the desired UX.
What resources do you have to assist this effort?
We need a reusable link component for Lyne Components based on the initial Figma designs.
Links are an integral part of the web and therefore web applications.
The link component follows the Figma designs. The link component follows the WCAG 2.1 guidelines and provides a high contrast mode.
The link component can either be used as an HTML link a
(default) but also as a button
.
The link component can be combined with an icon either leading or trailing.
Figma link definition https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?node-id=616%3A531387
Use this template if you want to request a new feature, or a change to an
existing feature.
If you are reporting a bug or problem, please use the bug or corresponding issue template instead.
Card badge component https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?node-id=1341%3A636046
lyne-components
non package issue
Describe in detail the issue you're having.
Is this issue related to a specific component?
What did you expect to happen? What happened instead? What would you like to
see changed?
What browser are you working in?
What version of the Lyne Design System are you using?
What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
Please create a reduced test case in CodeSandbox
master
branch failed. π¨I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. Iβm sure you can resolve this πͺ.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here is some links that can help you:
If those donβt help, or if this issue is reporting something you think isnβt right, you can always ask the humans behind semantic-release.
A name for the package must be created. Run through npm (npm run to use npm package name or define packageName in the plugin config or SEMANTIC_RELEASE_PACKAGE
in the environment
Good luck with your project β¨
Your semantic-release bot π¦π
Create a composed component for the timetable input form. Users must be able to provide a departure & arrival location as well as a date in order to be able to do a request for available connections
Since there is not a globally defined CSS (except the font-face declartaion) for all encapsulated components (default mode for Lyne Components) the default text styling falls back to the default browser font e.g. Times New Roman (serif) which then leads to a FOUT (flash of unstyled text) once the components CSS is loaded.
These solutions would be part of the suggested lyne-fonts
npm package and the SBB font-face declaration would go first in this CSS file.
body {
font-family: "SBBWeb Roman", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
Pro: Fairly easy
Cons: Side effects (on all typography) because it is very generic
[lyne-*] {
font-family: "SBBWeb Roman", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
Pro: less generic, only applies to components which have this attribute. Components need to have all this shared attribute since there is no wildcard selector for tags like lyne-*
Cons: Introduction of a attribute over all components
npm package name needs to be changed from lyne-test
to lyne-components
.
Consistent naming pattern. The name lyne-test
was chosen for the initial test phase to see how the versioning behaves with conventional commits.
lyne-components
non package issue
Describe in detail the issue you're having.
Is this issue related to a specific component?
What did you expect to happen? What happened instead? What would you like to
see changed?
What browser are you working in?
What version of the Lyne Design System are you using?
What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
Please create a reduced test case in CodeSandbox
During development of the button component, there was no possibility to check for High Contrast Mode on Windows.
Tasks:
lyne-components
non package issue
Describe in detail the issue you're having.
Is this issue related to a specific component?
What did you expect to happen? What happened instead? What would you like to
see changed?
What browser are you working in?
What version of the Lyne Design System are you using?
What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
Please create a reduced test case in CodeSandbox
lyne-components
lyne-design-tokens
non package issue
Is this issue related to optimizable/incomplete documentation/information?
Replace sourcerer.io on doc pages (e.g. readme.md -> Hall of fame) since it no longer works or have a look why it does not anymore work.
lyne-components
non package issue
Describe in detail the issue you're having.
Is this issue related to a specific component?
What did you expect to happen? What happened instead? What would you like to
see changed?
What browser are you working in?
What version of the Lyne Design System are you using?
What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
Please create a reduced test case in CodeSandbox
Use this template if you want to request a new feature, or a change to an
existing feature.
If you are reporting a bug or problem, please use the bug or corresponding issue template instead.
Product ticket component https://www.figma.com/file/oA9B5W6w0449gtItDzLS86/sbb.ch-%E2%80%93-Components?node-id=406%3A535841
lyne-components
non package issue
Describe in detail the issue you're having.
Is this issue related to a specific component?
What did you expect to happen? What happened instead? What would you like to
see changed?
What browser are you working in?
What version of the Lyne Design System are you using?
What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
Please create a reduced test case in CodeSandbox
Reset npm packages version number to 0.0.1
If a potential user finds our repository / wants to work / start to use our components, they need an indication that the current version is under heavy construction and that there still might be breaking changes.
This can easily be achieved with a semantic version below 1.0
therefore we start with 0.0.1
lyne-components
non package issue
Describe in detail the issue you're having.
Is this issue related to a specific component?
What did you expect to happen? What happened instead? What would you like to
see changed?
What browser are you working in?
What version of the Lyne Design System are you using?
What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
Please create a reduced test case in CodeSandbox
lyne-components
non package issue
Describe in detail the issue you're having.
Is this issue related to a specific component?
What did you expect to happen? What happened instead? What would you like to
see changed?
What browser are you working in?
What version of the Lyne Design System are you using?
What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
Please create a reduced test case in CodeSandbox
lyne-components
non package issue
Documentation platform issues:
We need a stack component which can have varying gap sizes between its items and the direction needs to be choosable (horizontal/vertical).
lyne-components
non package issue
Describe in detail the issue you're having.
Is this issue related to a specific component?
What did you expect to happen? What happened instead? What would you like to
see changed?
What browser are you working in?
What version of the Lyne Design System are you using?
What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
Please create a reduced test case in CodeSandbox
master
branch failed. π¨I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. Iβm sure you can resolve this πͺ.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here is some links that can help you:
If those donβt help, or if this issue is reporting something you think isnβt right, you can always ask the humans behind semantic-release.
Unfortunately this error doesn't have any additional information. Feel free to kindly ask the author of the @semantic-release/exec
plugin to add more helpful information.
Good luck with your project β¨
Your semantic-release bot π¦π
lyne-components
non package issue
Describe in detail the issue you're having.
Is this issue related to a specific component?
What did you expect to happen? What happened instead? What would you like to
see changed?
What browser are you working in?
What version of the Lyne Design System are you using?
What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
Please create a reduced test case in CodeSandbox
Rename/move npm user name from lyne-design-system
to an organisation.
~lyne-design-system gets @lyne/*
(* is a placeholder for the repo name). Lyne username is taken, but the organization name lyne should be available.
Then update all npm packages.
Clearer communication. More possibilities.
Stencil will deprecate the output target dist-custom-elements-bundle
, which we heavily rely on our project and other projects like lyne-documentation, lyne-getting-started etc.
Stencil has open issues regarding this deprecation:
Esri/calcite-design-system#3957
ionic-team/stencil#3136
We should transition as soon as possible to the output target dist-custom-elements
.
lyne-components
non package issue
Describe in detail the issue you're having.
Is this issue related to a specific component?
What did you expect to happen? What happened instead? What would you like to
see changed?
What browser are you working in?
What version of the Lyne Design System are you using?
What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
Please create a reduced test case in CodeSandbox
lyne-components
non package issue
Describe in detail the issue you're having.
Is this issue related to a specific component?
What did you expect to happen? What happened instead? What would you like to
see changed?
What browser are you working in?
What version of the Lyne Design System are you using?
What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
Please create a reduced test case in CodeSandbox
lyne-components
non package issue
Describe in detail the issue you're having.
Is this issue related to a specific component?
What did you expect to happen? What happened instead? What would you like to
see changed?
What browser are you working in?
What version of the Lyne Design System are you using?
What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
Please create a reduced test case in CodeSandbox
During development of the Button Component, we realized that some of the contrast-ratio on certain variants might not be sufficient.
Tasks:
Use this template if you want to request a new feature, or a change to an
existing feature.
If you are reporting a bug or problem, please use the bug or corresponding issue template instead.
Please describe your request in one or two sentences.
Clarify if you are asking for design, development, or both design and
development.
Provide the business reasons for this request.
Describe the full user experience for this feature. Also define the metrics by
which we can measure success/failure for the user.
Highlight any "must have" needs and functionality for the request.
This should not be a full list of functionality; the Lyne team will work with
you to define functionality based on the desired UX.
What resources do you have to assist this effort?
The min-height of the small button variant is 40px. We defined in our Design System, that touch-elements should have a min-height of 48px. Should we fix this?
lyne-components
non package issue
Describe in detail the issue you're having.
Is this issue related to a specific component?
What did you expect to happen? What happened instead? What would you like to
see changed?
What browser are you working in?
What version of the Lyne Design System are you using?
What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
Please create a reduced test case in CodeSandbox
master
branch failed. π¨I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. Iβm sure you can fix this πͺ.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here are some links that can help you:
If those donβt help, or if this issue is reporting something you think isnβt right, you can always ask the humans behind semantic-release.
The npm token configured in the NPM_TOKEN
environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/
.
If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.
Please make sure to set the NPM_TOKEN
environment variable in your CI with the exact value of the npm token.
Good luck with your project β¨
Your semantic-release bot π¦π
lyne-components
lyne-design-tokens
non package issue
Outdated documentation in general.
If people need / or want to be onboarded the documentation of the corresponding repository and documentation plattform itself need to be up to date.
Type of device (e.g. Laptop with Touchscreen)
Operating system (e.g. Windows 10)
Browser / browser version (e.g. Mozilla Firefox 74.0 (64-bit))
Automated testing tool and rule set (e.g. axe - Web Accessibility Testing Extension)
Assistive technology and version used to verify (e.g. NVDA version 2019.3.1)
Additional settings (e.g. Windows High Contrast Mode)
lyne-components
lyne-design-tokens
non package issue
Which version of Lyne Components are you using?
Is the issue related to a specific component? If so please provide the components Storybook link of the corresponding version.
What did you expect to happen?
What happened instead?
What WCAG 2.1 checkpoint does the issue violate?
Is the issue a general finding or specifically related to the usage of Lyne Components
within your application?
If the latter, can you provide us with a link to your application where the behaviour can
be seen or replicated?
Since when has the issue been noticed? Can it be related to a specific
Lyne Components version change?
Please create a reduced test case in CodeSandbox
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.