lyne-design-system / lyne-components Goto Github PK

What package(s) are you using?

• lyne-components
• non package issue

Detailed description

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?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• https://codesandbox.io/

Additional information

• Screenshots or code
• Notes

During development of the Button Component, we realized that some of the contrast-ratio on certain variants might not be sufficient.

Tasks:

• Check button contrast-ratio in all Variants, enabled/disabled, with/without icon, hover/active/focus
• Fix issues with contrast-ratios

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?

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

To which package(s) is this related?

• lyne-components
• lyne-design-tokens
• non package issue

Missing documentation/information?

Outdated documentation in general.

Justification

If people need / or want to be onboarded the documentation of the corresponding repository and documentation plattform itself need to be up to date.

What package(s) are you using?

• lyne-components
• non package issue

Detailed description

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?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• https://codesandbox.io/

Additional information

• Screenshots or code
• Notes

What package(s) are you using?

• lyne-components
• non package issue

Detailed description

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?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• https://codesandbox.io/

Additional information

• Screenshots or code
• Notes

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

To which package(s) is this related?

• lyne-components
• lyne-design-tokens
• non package issue

Optimizable/incomplete documentation/information?

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.

What package(s) are you using?

• lyne-components
• non package issue

Detailed description

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?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• https://codesandbox.io/

Additional information

• Screenshots or code
• Notes

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

This module will let links appear in the visual formatting of a button.

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Which package(s) are you using?

• lyne-components
• non package issue

Detailed description

Broken component preview on documentation platform

The following components are not previewed correctly:

• card-product
• card-badge
• journey-header

What package(s) are you using?

• lyne-components
• non package issue

Detailed description

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?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• https://codesandbox.io/

Additional information

• Screenshots or code
• Notes

What package(s) are you using?

• lyne-components
• non package issue

Detailed description

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?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• https://codesandbox.io/

Additional information

• Screenshots or code
• Notes

What package(s) are you using?

• lyne-components
• non package issue

Detailed description

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?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• https://codesandbox.io/

Additional information

• Screenshots or code
• Notes

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.

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Summary

We need a stack component which can have varying gap sizes between its items and the direction needs to be choosable (horizontal/vertical).

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Summary

Lyne footer component according to to the Figma design https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?node-id=820%3A546005

Justification

Everybody want's a footer ;)

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Summary

Journey header component https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?node-id=2154%3A575279

🚨 The automated release from the 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:

• Usage documentation
• Frequently Asked Questions
• Support channels

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 📦🚀

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.

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Summary

Card badge component https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?node-id=1341%3A636046

What package(s) are you using?

• lyne-components
• non package issue

Detailed description

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?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• https://codesandbox.io/

Additional information

• Screenshots or code
• Notes

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.

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Summary

Product subscription component

See Figma https://www.figma.com/file/oA9B5W6w0449gtItDzLS86/sbb.ch-%E2%80%93-Components?node-id=406%3A535841

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Summary

Reset npm packages version number to 0.0.1

Justification

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

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Summary

npm package name needs to be changed from lyne-test to lyne-components.

Justification

Consistent naming pattern. The name lyne-test was chosen for the initial test phase to see how the versioning behaves with conventional commits.

🚨 The automated release from the 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:

• Usage documentation
• Frequently Asked Questions
• Support channels

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.

No name for the package defined.

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 📦🚀

What package(s) are you using?

• lyne-components
• non package issue

Detailed description

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?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• https://codesandbox.io/

Additional information

• Screenshots or code
• Notes

What package(s) are you using?

• lyne-components
• non package issue

Detailed description

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?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• https://codesandbox.io/

Additional information

• Screenshots or code
• Notes

What package(s) are you using?

• lyne-components
• non package issue

Detailed description

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?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• https://codesandbox.io/

Additional information

• Screenshots or code
• Notes

Environment

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)

Which package(s) are you using?

• lyne-components
• lyne-design-tokens
• non package issue

Detailed description

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?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• https://codesandbox.io/

Additional information

• Screenshots or code
• Notes

During development of the button component, there was no possibility to check for High Contrast Mode on Windows.

Tasks:

• Check button in High Contrast mode in all Variants, enabled/disabled, with/without icon, hover/active/focus
• Fix issues with High Contrast mode

🚨 The automated release from the 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:

• Usage documentation
• Frequently Asked Questions
• Support channels

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.

Invalid npm token.

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 📦🚀

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.

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Summary

Product ticket component https://www.figma.com/file/oA9B5W6w0449gtItDzLS86/sbb.ch-%E2%80%93-Components?node-id=406%3A535841

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Which package(s) are you using?

• lyne-components
• non package issue

Detailed description

Documentation platform issues:

• Wrong positioning of card-badge
• camelCase issues with properties
• Styling issues / component background colors

What package(s) are you using?

• lyne-components
• non package issue

Detailed description

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?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• https://codesandbox.io/

Additional information

• Screenshots or code
• Notes

What package(s) are you using?

• lyne-components
• non package issue

Detailed description

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?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• https://codesandbox.io/

Additional information

• Screenshots or code
• Notes

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?

https://www.w3.org/TR/WCAG21/#use-of-color

What package(s) are you using?

• lyne-components
• non package issue

Detailed description

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?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• https://codesandbox.io/

Additional information

• Screenshots or code
• Notes

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.

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Summary

Please describe your request in one or two sentences.

Clarify if you are asking for design, development, or both design and
development.

Justification

Provide the business reasons for this request.

Desired UX and success metrics

Describe the full user experience for this feature. Also define the metrics by
which we can measure success/failure for the user.

"Must have" functionality

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.

Available extra resources

What resources do you have to assist this effort?

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Summary

We need a reusable link component for Lyne Components based on the initial Figma designs.

Justification

Links are an integral part of the web and therefore web applications.

Desired UX and success metrics

The link component follows the Figma designs. The link component follows the WCAG 2.1 guidelines and provides a high contrast mode.

"Must have" functionality

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.

Available extra resources

Figma link definition https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?node-id=616%3A531387

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Summary

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.

Possible solutions

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.

Generic

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

Attribute selector e.g.

[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

What package(s) are you using?

• lyne-components
• non package issue

Detailed description

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?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• https://codesandbox.io/

Additional information

• Screenshots or code
• Notes

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.

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Summary

Please describe your request in one or two sentences.

Clarify if you are asking for design, development, or both design and
development.

Justification

Provide the business reasons for this request.

Desired UX and success metrics

Describe the full user experience for this feature. Also define the metrics by
which we can measure success/failure for the user.

"Must have" functionality

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.

Available extra resources

What resources do you have to assist this effort?

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Summary

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.

Justification

Clearer communication. More possibilities.