scania-digital-design-system/sdds

[deprecated] Scanias legacy design system implementation (sdds-)

sdds's Issues

Bug - React demo, import is deprecated

Describe the bug
-- 'defineCustomElements' is deprecated.
-- On line '7'

Screenshots

Framework and version

• Framework: React

Additional context
-- The components is still working fine

AB#720

Bug - "title text"

Describe the bug
A clear and concise description of what the bug is.

azure test

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Version of SDDS
E.g 1.0.0

Framework and version
If you use any specific framework please provide information

• Framework: [e.g Angular]
• Version: [ e.g 6 ]

Application link
Provide link if possible

• https://example.com

Desktop information:
Please complete the following information

• Browser [e.g. chrome, safari]
• Version [e.g. 76]
• OS: [e.g. Windows 10]

Smartphone information
Please complete the following information

• Device: [e.g. iPhone6]
• OS: [e.g. iOS 8.1]
• Browser [e.g. safari]
• Version [e.g. 11]

Additional context
Add any other context about the problem here.

AB#174

Bug - Latest typescript version cause error

Describe the bug
A clear and concise description of what the bug is.
When building a react, angular based on typescript. There is an issue importing the current version of SDDS components/theme.

Workaround exist
https://www.javaer101.com/en/article/18245268.html

To Reproduce
Steps to reproduce the behavior:

1. create a new angular project
2. Install SDDS
3. Try and import

You can try the same thing with react application based on typescript

Expected behavior
A clear and concise description of what you expected to happen.
No error

no error with without changing the tsconfig(?)

Screenshots
If applicable, add screenshots to help explain your problem.

Version of SDDS
1.4.0+

Framework and version
If you use any specific framework please provide information

• Framework: angular 11

Additional context
Add any other context about the problem here.
There is a workaround with this https://www.javaer101.com/en/article/18245268.html

You can set strict to false in tsconfig

AB#711

Bug - Vue demo, import is deprecated

Describe the bug
-- In main.js file; 'defineCustomElements' is deprecated.
-- On line '3'

Screenshots

Framework and version

• Framework: Vue

Additional context
-- The components is still working fine

AB#721

Bug - "Font file Not Found error"

Describe the bug
Font file Not Found (404) error when using sdds-schema

To Reproduce

1. Create HTML Project
2. Import SDDS theme and components

  <script src="resources/node_modules/@scania/theme-light/dist/light-theme.js"></script>
  <script src="resources/node_modules/@scania/components/dist/core.js"></script>

3. Use SDDS theme
   <sdds-theme></sdds-theme>

Screenshots
Font Not Found error in the console

Framework and version
@scania/components": "^1.4.2,
@scania/theme-light": "^2.1.0",

Additional context
Please fix it as early as possible we are implementing Login page using SDDS theme.

The issue is also reproducible in the sample HTML project
https://github.com/scania-digital-design-system/sdds/tree/master/demo/HTML

AB#783

Bug - "sdds-button with tooltip"

Describe the bug
Tooltip do not having the correct distance, instead floats on top of the target, in this case, button.
The bug doesn't appear locally, but does in the production preview.

To Reproduce
Use this code: <sdds-button type="primary" id="button-1" text="Button"></sdds-button> <sdds-tooltip placement="top" selector="#button-1" text="Lorem ipsum"></sdds-tooltip>

Expected behavior
The tooltip should have a distance of 8px from the target, in this case, the button

Screenshots

AB#687

Additional comment
The tooltip works as intended by having the "original" button as the target instead, like <button class="sdds-btn sdds-btn-primary">

Feature - White theme

What is your feature request?
A clear and concise description of what the feature is. Ex. I'm always frustrated when [...]
Further on we will need more theming options

• Start evaluating the flow
• Performance
• Create textfield component as an example

Describe the solution you'd like
A clear and concise description of what you want to happen.

• Package with white theming
• Possible to switch themes
• Storybook switching

Additional context
Add any other context or screenshots about the feature request here.

AB#365

Feature - Add CI tool

What is your feature request?
A clear and concise description of what the feature is. Ex. I'm always frustrated when [...]
There is, right now, no CI tool added

Describe the solution you'd like
A clear and concise description of what you want to happen.
ideas

• Add basic github action/travis CI support
• Copy what we had in corporate-ui
• Add seperate build process for theme , components and storybook depending what you are developing

Additional context
Add any other context or screenshots about the feature request here.
Might be other tools?

AB#172

Feature - v2 Card features

What is your feature request?
A clear and concise description of what the feature is. Ex. I'm always frustrated when [...]

Current card is missing following features

• Img-left - almost done
• Expand - being worked on
• Expand - examples in storybook worked on

Describe the solution you'd like
A clear and concise description of what you want to happen.
Based on figma add those features

Additional context
Add any other context or screenshots about the feature request here.

AB#702

Improvement - Separate assets

Describe current situation

• Separate fonts , icons, image logotypes in assets repository
• Consider to put fonts inside typography package

AB#252

Bug - Dropdown losing selected class on click outside element

Describe the bug
When clickin outside, the selected class is gone

To Reproduce
Steps to reproduce the behavior:

1. Go to dropdown
2. Click on one option, and see it is selected
3. Click outside the dropdown
4. See error

Expected behavior
Selected class should stay

Notes
See comments in #85

AB#508

Improvement - No padding + gutterless grid can't be combined in grid

Describe current situation
Describe what the current situation and what problem it is causing for this improvement

Right now you can't add no padding + gutterless to combind them in the grid system

We have both no padding and gutterless which removes the padding, but they aren't removing the whole padding if both are used

Describe the improvement
A clear and concise description of what kind of improvement you have in mind.

possibility to add gutterless + no padding class to remove the whole padding

If applicable, please provide steps to reproduce
Steps to reproduce the behavior:

1. Go to storybook example with Grid PR (add link to branch);
2. Try and combined no padding and gutterless classes
3. Nothing happeneds with both of them

Additional context
Add any other context about the suggestion here.

• Figma has example with no padding + gutterless example
• Adding classes on the container to remove padding/gutterless to remove padding

AB#249

Bug - Padding missing on col below its breakpoint (XXLG below 1312px screen)

Describe the bug
A clear and concise description of what the bug is.

When using a smaller breakpoint then column used, XXLG on a screen below 1312px, it will not add the padding on left right when the column because full width

To Reproduce
Steps to reproduce the behavior:

1. Go to a page with grid system
2. Change window resolution to be below the choosen breakpoint, for example XXLG on a screen below 1312px
3. Look at the size of column, no padding only flex-basis 100%

code example:

1. use .sdds-col-xxlg-1
2. resize a screen below 1312 px
3. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.
Dark red container
light red col
xxlg on 1312 screen

How it should be is the area between dark red(container) and light red(col)
white area is spacing on a xxlg-16 on bigger screen then 1584px

Version of SDDS
SDDS 1.0.0
Grid 1.0.0-beta

Desktop information:
Please complete the following information

• Browser: Chrome
• Windows/mac

Additional context
Add any other context about the problem here.
Add padding in the full width options in the mixin

AB#250

Improvement - Move examples from $content to templates

Describe current situation
Describe what the current situation and what problem it is causing for this improvement

Right now we are using $content control inside some of the stories (headline as an example) to show code example. This might be causing problems in the future, when showing multiple examples in storybook. We should utilize the controls/templates the correct way https://storybook.js.org/docs/react/essentials/controls

export const Headlines = Template.bind({});
Headlines.args = {
  content: `
  <h1>Headline</h1>
  <h2>Headline</h2>
  <h3>A headline for page layouts</h3>
  <h4>A headline for page layouts</h4>
  <h5>A sub headline, which is most commonly paired with body-01</h5>
  <h6>A sub headline, which is most commonly paired with body-02</h6>
  <h7>A sub headline, which is most commonly paired with detail-02 </h7>
  `
}

Describe the improvement
A clear and concise description of what kind of improvement you have in mind.

Instead we should use the templates more to solve multiple examples,

export const Headlines = coolHeadlineTemplate.bind({});

If applicable, please provide steps to reproduce
Steps to reproduce the behavior:

1. Go to headline story code
2. Look at the $content

AB#170

Improvement - Helper text, error and more for textfield

Describe current situation
Describe what the current situation and what problem it is causing for this improvement

textfield improvements

• - Error
• - Helper
• - Text counter
• - Suffix icon
• - Prefix icon
• - Suffix text
• - prefix text
• - Label transtion
• - Add comments for props

Describe the improvement
A clear and concise description of what kind of improvement you have in mind.
Add textfield options to the textfield component

If applicable, please provide steps to reproduce
Steps to reproduce the behavior:

1. Go to textfields and see what is missing compared to figma

AB#387

Build footprint and tree shaking

Hi,

We are using these components for the new ICE (External UI).

"@scania/theme-light": "2.1.0",
"@scania/components": "1.4.2",

Now, we did some digging and found that before using these packages this was our build stats:

And after adding the components.

This in turn broke our build pipeline.

Are these sizes to be expected? Is there any tree shaking we can do or did we install these incorrectly or something?

Thanks in advance.
/Erik

AB#761

Bug - Storybook c-theme global true remains when changing story

Describe the bug
A clear and concise description of what the bug is.

When you have a story with c-theme global="true" it will remain when changing between stories that doesn't have it
Needs to hard refresh to remove the global true

To Reproduce
Steps to reproduce the behavior:

1. Set a story with c-theme global="true"
2. Set a story c-theme without global true
3. Change from story with global true to on story with global false
4. See error

Expected behavior
A clear and concise description of what you expected to happen.
That every example is isolated, doesn't matter if you use global true or not

Version of SDDS
Latest

Framework and version
If you use any specific framework please provide information

• Framework: Run storybook
• Version: 6+

Desktop information:
Please complete the following information

• Browser chrome
• Version 80+
• OS: macOS catalina

Additional context
Add any other context about the problem here.
Might effect how we want to present stuff, but maybe in our case we will always have it on every example

AB#255

AB#917

Export spacing package

Spacing can be exported as it's own package

AB#247

Improvement - Dev enviroment for core folder doesn't have watchers

Describe current situation
Describe what the current situation and what problem it is causing for this improvement
Under the core folder for foundation, we can't live edit files and see the effected changes directly in the browser.
We need to rebuild to see the change in core/**

Theme is running on gulp that have watchers for the theme/light for example

Describe the improvement
A clear and concise description of what kind of improvement you have in mind.
Somehow make it possbile to rebuild everything under the core/** with storybook running with lerna

If applicable, please provide steps to reproduce
Steps to reproduce the behavior:

1. Run storybook
2. Do changes in a core/**/*.scss file
3. Save it
4. Since there is no watcher nothing will happened

AB#696

Improvement - Change name of the prefix in SCSS

Describe current situation
Describe what the current situation and what problem it is causing for this improvement

Right now the prefix is .sdds which makes it impossible to use it on variables names.
This also effects the theming in VS code, breaking the theming

Describe the improvement
A clear and concise description of what kind of improvement you have in mind.

Remove . before the prefix name, add it on every class that use the prefix instead
Add the prefix for the variable name

.#{prefix}-class instead of #{$prefix}-class

If applicable, please provide steps to reproduce
Steps to reproduce the behavior:

1. Go to any SCSS file
2. See error

Screenshots
If applicable, add screenshots to help explain your ideas.

Additional context
Add any other context about the suggestion here.

AB#371

Export breakpoint value to be able to use in application

• I want to have the possibility to use breakpoints value in my application and import it from grid package (use it without scania-theme or components)
• Either using sass variables or CSS variables
• For example:

@import '@scania-sdds/grid/breakpoints';

@media (min-width: $sdds-breakpoint-sm){ .... }

// OR

@media (min-width: var(--sdds-breakpoint-sm)){ ... } // boostrap has this

Possible solution:

• Create separate file for breakpoints variables in _vars.scss or something like that
• Export CSS Vars
• Make both CSS vars and scss file available in grid package

Bug - Using screen sass variables for media rules doesn't work

Describe the bug
A clear and concise description of what the bug is.

Creating a media rule and using sass variables from grid system doesn't work because the rem isn't the correct value

To Reproduce
Steps to reproduce the behavior:

1. Create a media rule with $screen-s or other
2. See if it works on correct breakpoint pixel
3. See error

Expected behavior
A clear and concise description of what you expected to happen.
Should work to use rem value

Version of SDDS
E.g 1.0.0
All versions in grid package

Desktop information:
Please complete the following information

• Browser All

Additional context
Add any other context about the problem here.
Add mixin for handling screen resolution

AB#759

File not found error for some scania font files

Getting an error in browser console as 'Failed to load resource: the server responded with a status of 404 (Not Found)' when I run a web application using SDDS themes and components in .net

To Reproduce
Steps to reproduce the behavior:

1. Open Visual Studio. Go to File menu -> New Project
2. New Project window will show up.
   a) Choose Visual C# -> Web (from left side)
   b) On Right side choose ASP.NET Web application (.Net Framework)
   c) Click OK
   d) Select Empty and then click OK
3. In Solution Explorer right click on project name -> Select Add -> New Item
4. Select Web and from right side select npm configuration file and click Add
5. package.json will be added to your project
6. In package.json add below packages inside devDependencies and save the file
   "@scania/components": "1.3.1",
   "@scania/grid": "1.0.0",
   "@scania/theme-light": "1.2.0",
   "@scania/typography": "1.1.0"
7. In solution explorer click on see all files, you will see the node_modules folder having scania packages
8. Again Right click on project in solution explorer, select Add -> New Item -> Select Web -> Select WebForm and click Add
9. Copy Paste the below code in Webform.aspx

<title>Basic UI using SDDS</title>

<script src="../node_modules/@scania/theme-light/dist/light-theme.js"></script>
<script src="../node_modules/@scania/components/dist/core.js"></script>

ABC TES

<c-navigation>
    <a href='/home' slot='primary-items'>home</a>
    <a href='/about' class='parent' slot='primary-items' active=''>about</a>
    <a href='/profile' class='parent' slot='primary-items'>profile</a>
    <a href='/abc' class='parent' slot='primary-items'>abc</a>
    <a href='/xyz' class='parent' slot='primary-items'>xyz</a>
    <a href='/more' slot='secondary-items'>more</a>

    <c-navigation slot='sub' caption='About' target='/about' active=''>
        <a href='/about' slot='primary-items' active=''>About 1</a>
        <a href='/about2' slot='primary-items'>About 2</a>
        <a href='/about3' slot='secondary-items'>About 3</a>
    </c-navigation>

    <c-navigation slot='sub' target='/profile'>
        <a href='/profile' slot='primary-items'>Profile 1</a>
        <a href='/profile2' slot='primary-items'>Profile 2</a>
        <a href='/profile3' slot='secondary-items'>Profile 3</a>
    </c-navigation>

    <c-navigation slot='sub' target='/abc'>
        <a href='/abc' slot='primary-items'>abc 1</a>
        <a href='/abc2' slot='primary-items'>abc 2</a>
        <a href='/abc3' slot='secondary-items'>abc 3</a>
    </c-navigation>

    <c-navigation slot='sub' target='/xyz'>
        <a href='/xyz' slot='primary-items'>xyz 1</a>
        <a href='/xyz2' slot='primary-items'>xyz 2</a>
        <a href='/xyz3' slot='secondary-items'>xyz 3</a>
    </c-navigation>
</c-navigation>
<c-content>
    <section>
        <h3>A Title of the page</h3>
        <div class='alert alert-success' role='alert'>
            A simple success alert—check it out!
        </div>
        <button class="sdds-btn sdds-btn-secondary">Secondary Button</button>

    </section>
</c-content>
<div class="sdds-container">
<div class="sdds-row">
    <div class="sdds-col-xxlg-16 sdds-col-xlg-16 sdds-col-lg-16 sdds-col-md-8 sdds-col-sm-4">
        <div>
            <sdds-accordion>
                <sdds-accordion-item header="First item" affix="prefix" tabindex="1">
                    This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header. Lorem ipsum doler sit amet.
                </sdds-accordion-item>
                <sdds-accordion-item header="Second Item" affix="prefix" tabindex="2" expanded="true">
                    This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header. Lorem ipsum doler sit amet.
                </sdds-accordion-item>
            </sdds-accordion>
        </div>
    </div>
</div>

10. Save the file and Run the application

Expected behavior
Web application Runs displaying the output and there should not be any error messages shown in the browser console.

Actual Behavior
Application Runs but there are error messages in the browser console

Screenshots
![404error](https://user-images.githubusercontent.com/81211310/112109482-a8229400-8bd7-11eb-9702-9f49791e256f.PNG

Version of SDDS
E.g 1.0.0

Framework and version
If you use any specific framework please provide information

• Framework: [e.g .Net]

Desktop information:
Please complete the following information

• Browser [Chrome]
• Version [89]
• OS: [e.g. Windows 10]

AB#688

Race Condition may prevent DOMContentLoaded from getting fired

Describe the bug
In our current setup DOMContentLoaded gets fired before fixFouc() in defineCustomElements registers the listener. This causes the body visibility to never be set to visible.

To Reproduce
Call defineCustomElements with document.readyState !== loading

Expected behavior
I expect the defineCustomElements() to set the visibilty even if document is ready when calling defineCustomElements()

Version of SDDS
"@scania/components": "1.2.0",

Framework and version
React ^17
"single-spa": "^5.3.1",

Desktop information:
Chrome 88.0.4324.192
OSX 10.15.7

Additional context
Adding a check to document.readyState in @scania/components/dist/collection/index.js:fixFouc() solves this issue. I currently don't have a branch, but i'll embed the code snippet anyway if you want to take a look at it.

function fixFouc() {
    var elm = document.createElement('style');
    var style = document.createTextNode('body { visibility: hidden; }');

    document.head.insertBefore(elm, document.head.firstChild);
    elm.appendChild(style);

    if (document.readyState !== 'loading') {
        // Already ready set visibility
        style.nodeValue = 'body { visibility: visible; }';
    } else {
        document.addEventListener('DOMContentLoaded', function () {
            // This timeout is to make sure that IE has time to load
            setTimeout(function () {
                if (document.querySelector('c-theme')) return;
                // Used in case a theme element is not rendered
                style.nodeValue = 'body { visibility: visible; }';
            });
        });
    }
}

AB#507

Feature - Add azure board connection

What is your feature request?
A clear and concise description of what the feature is. Ex. I'm always frustrated when [...]
Adding a connection between azure board to be able to see issue in azure devops

Describe the solution you'd like
A clear and concise description of what you want to happen.
https://github.com/marketplace/actions/github-issues-to-azure-devops
Github action automation

SDDS not working with Vue3/Vite

Describe the bug
When using Vite (https://vitejs.dev) as bundler for a Vue3 project will SDDS generate errors which stops rendering of the page.

ReferenceError: require is not defined
at @scania_components.js:1726
at async initializeComponent (@scania_components.js:1421) undefined
consoleError @ index-5cfef938.js:1713
index-5cfef938.js:1366 Uncaught (in promise) TypeError: Cannot read property 'isProxied' of undefined
at initializeComponent (@scania_components.js:1424)

The same code works fine in a Vue3 project using Vue CLI.

To Reproduce

1. Generate a shell project in Vue3 using Vite (Instructions at https://vitejs.dev)
2. Follow basic instructions for adding SDDS.
3. Add a component and some HTML.
4. Run and check the console

Demo project can be found here: https://gitlab.scania.com/sssmzb/sdds-vue3-vite (internal)

Expected behavior
SDDS in combination with Vue3 should be possible to bundle with Vite.

Screenshots
If applicable, add screenshots to help explain your problem.

Version of SDDS
"@scania/components": "^1.4.2",
"@scania/theme-light": "^2.1.0",

Framework and version
"vue": "^3.0.5"
"vite": "^2.1.5"

Repo link
https://gitlab.scania.com/sssmzb/sdds-vue3-vite

Desktop information:
Chrome 89

AB#744

Add new spacing value

$spacing-layout-72 needs to be added to typography package

AB#191

Bug - Auto focus on input field not working when using @scania/components/dist/core.js

Describe the bug
_Auto focus on input field not working when using @scania/components/dist/core.js

To Reproduce
Steps to reproduce the behavior:

1. Import @scania/components/dist/core.js'
2. Add an input field in the HTML
   <input type="text" id="username" name="username" autofocus></input>

Version of SDDS
"@scania/components": "^1.5.0",
"@scania/theme-light": "^2.2.0",

Framework and version
HTML project

Browser information:
All browser

Additional information:
Please fix it as soon as possible we need to have autofocus on username field in login form.

AB#782

Feature - Add Control Value Accessors interface to the input text component

What is your feature request?
Today it is not possible to use the data binding provided by Angular in the input text component (NgModel).

Describe the solution you'd like
Integrate the Web Component into forms on Angular projects using Control Value Accessors that acts as a bridge between the component and the Angular forms API, allowing you to use ngModel, form validation, and the like with the component.

Additional context
https://github.com/kensodemann/blogs/blob/master/stencil/Using%20ngModel%20with%20Stencil%20Components.md
https://stackoverflow.com/questions/45659742/angular4-no-value-accessor-for-form-control/45659791

AB#509

Feature - Move npm package under @scania organisation

What is your feature request?
@scania is now ours!
Let's move all packages from @scania-sdds to @scania in npm

Describe the solution you'd like

• Update all links and documentation
• Update all package name

AB#253

Bug - Node error after a certain amount of time

Describe the bug
A clear and concise description of what the bug is.

On mac

After certain amount of time/or rebuilds, the node gets an error. Shown in the screenshot

To Reproduce
Steps to reproduce the behavior:

• Not sure how the replicate it

1. Start terminal
2. Start the project
3. Wait/rebuild
4. After a while it will crash

Expected behavior
A clear and concise description of what you expected to happen.
Not crash

Screenshots

If applicable, add screenshots to help explain your problem.

Version of SDDS
E.g 1.0.0
sdds 1.0.0
Lerna problem?

Desktop information:
Please complete the following information

• Node: v12
• OS: macOS catalina

Additional context
Add any other context about the problem here.

AB#345

Improvement - possibility to add icon to the right when button is present

Picture from Figma for Button and icon used at the same time. Icon is on the right. I think this style is missing.

• Can be added on next release
• Please add a note / issue if added in next release

• Adding issue on this

Originally posted by @mmexvr in #101 (comment)

AB#686

Improvement - Update c-theme name to sdds-theme

Describe current situation
Current theme component has c-theme naming

Describe the improvement
Should be updated to sdds-theme
Check other components that needs update now.
(Wait for header & navigation)

AB#480

Improvement - Add storybook story for grid

Describe current situation
Describe what the current situation and what problem it is causing for this improvement

There is no storybook story for the grid system

Describe the improvement
A clear and concise description of what kind of improvement you have in mind.

Add a storybook story for the whole gridsystem

• Regular

• Push

• Gutterless

• No padding

• Offset

• column options

• ...

• Spacing story added

If applicable, please provide steps to reproduce
Steps to reproduce the behavior:

1. Run storybook
2. Look in menu, no story for grid

AB#173

[Scania theme light] Improvement - Scania theme compile scripts duplicated

Describe current situation

• Same compile scripts exists in all packages. Can be improved with lerna or similar tools. Try to avoid duplication in scania-theme

If applicable, please provide steps to reproduce
Steps to reproduce the behavior:

1. Go to theme/light/src/styles/core
2. compile.js exists in all packages

AB#182

Improvement - Add styling for fullbleed button with icon

Describe current situation
Button in fullbleed and has icon, the styling is incorrect

Describe the improvement
If a button is fullbleed and has an icon, the text and icon should be center-aligned and the spacing between text and icon is 8px

Screenshots
If applicable, add screenshots to help explain your ideas.

Additional context
Add any other context about the suggestion here.

AB#464

Bug - Vue demo, memory performance issue

Describe the bug
-- Some performance issues, happens when scaling the running Vue browser window.

To Reproduce

1. Pull down project
2. Follow readme
3. npm run serve
4. Scale the localhost:8080 window
5. -->Performance memory issues

Screenshots

Framework and version

• Framework: Vue

Desktop information:

• Browser Chrome, Firefox
• OS: Windows 10

AB#722

Improvement - Remove bootstrap styling from scania theme light

Describe current situation
We will add SDDS styles to the theme and remove all old bootstrap styles

Describe the improvement

• Everything under components folder

AB#251

Improvement - Show the cursor: not-allowed on components disabled

Describe current situation
On disabled state we have default cursor

Describe the improvement
On disabled state for all components, should show not-allowed cursor.

AB#368

Bug - React demo, <a href warning

Describe the bug
-- On line 38 in components/main/Main.js, the "a" element doesn't href to anything, and React doesnt like that. If a dummy link
is set with href=, like "/" or "/#", the disabled breadcrumb doesn't get "disabled", and becomes clickable.

To Reproduce
-- Pull down the project
-- Initiate the project
-- npm start
-- Open file components/main/Main.js

Screenshots

Framework and version
-- Framework: React

AB#719

Improvement - Move c-theme under core instead of patterns

Describe current situation
c-theme file is under "patterns" folder in theme project

Describe the improvement
c-theme should belongs to core, since it is a core that contains all components classes & styles.

Need to check gulpfile.js to see if it's still added to the store when moved to core

AB#332

Improvement - Lerna improvements and ideas

Describe current situation
Describe what the current situation and what problem it is causing for this improvement

There are some improvement that can be made and some ideas that might be good to look into regarding lerna

Describe the improvement
A clear and concise description of what kind of improvement you have in mind.

• Not publish tags for each packages
• Remove the command from package.json and just use lerna commands directly (idea)
• Improvement for lerna config , might be needed
• How it detect changes in the packages
• Error when publishing from master branch(Might be solved on a seperate branch)

If applicable, please provide steps to reproduce
Steps to reproduce the behavior:

1. run NPM run publish command
2. It will detect all versions needs an update

Screenshots
If applicable, add screenshots to help explain your ideas.

Additional context
Add any other context about the suggestion here.

AB#479

Bug - Storybook some times failed to start with lerna command

Describe the bug
When components dependency for scania theme linked to local work, storybook failed to start on lerna command "lerna run start --parallel".
Maybe because the build in theme is not done before storybook build.
Notice that when we have @scania-sdds package, everything works fine.
Maybe good to have --stream flag instead.

To Reproduce
Steps to reproduce the behavior:

1. Go to sdds project
2. Run npm i then npm start
3. See if storybook built & running
4. See error

Expected behavior
Theme should be built before storybook with lerna command

Version of SDDS
1.0.0

Desktop information:
Please complete the following information

• OS: Windows 10

AB#331

Compile on minor packages error on windows

• On windows I got this error when run compile on colour package

UnhandledPromiseRejectionWarning: Error: No file for module C:\development\sdds\theme\light\src\styles\core\colour\tokens

• Might be caused by bundle-scss. Consider changing it to https://github.com/reactway/scss-bundle
• Shoudl create lerna and more efficient way to bundle minor packages. Try to avoid duplicate compile.js in every package

AB#248

Bug - @scania packages gets removed from package.json

Describe the bug
A clear and concise description of what the bug is.
When running npm i i the root folder SDDS, it will remove the scania packages during installation in the package.json in component folder

To Reproduce
Steps to reproduce the behavior:

1. Go to sdds root folder
2. run npm i from sdds folder
3. have the package.json up
4. See error
5. package-lock has the packages removed

Expected behavior
A clear and concise description of what you expected to happen.
Not remove any packages

Version of SDDS
latest

Framework and version
If you use any specific framework please provide information

• Run in node v12+

Application link
Provide link if possible

• https://example.com

Desktop information:
Please complete the following information

• OS: macOS catalina

Additional context
Add any other context about the problem here.
Bug in lerna or in our dev setup

AB#338

Improvement - "Performance update tooltip"

Describe current situation
Performance update can for the popperjs tooltip

Describe the improvement
Regarding this code:

this.target.addEventListener('mouseenter', () => {
      this.show = true;
--> TODO fix improve performance in the future, destroy poppers when it's not visible.
--> popperInstance.setOptions({
--> modifiers: [{ name: 'eventListeners', enabled: true }],
-->   });
-->  popperInstance.update();
    });

    this.target.addEventListener('mouseleave', () => {
      this.show = false;
--> popperInstance.setOptions({
--> modifiers: [{ name: 'eventListeners', enabled: false }],
      });
    });
  };

AB#604

Include font file in typography package

• Right now, typography package only provide font properties, but to make it display Scania fonts, we need to install c-theme as well, because the font is bundled in c-theme.
• We should be able to use the font from typography package as well, without dependency to scania-theme

AB#246

Add correct blue-700

The color for blue-700 is incorrect
not #16317f
correct #16417f

Bug - creating a task

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Version of SDDS
E.g 1.0.0

Framework and version
If you use any specific framework please provide information

• Framework: [e.g Angular]
• Version: [ e.g 6 ]

Application link
Provide link if possible

• https://example.com

Desktop information:
Please complete the following information

• Browser [e.g. chrome, safari]
• Version [e.g. 76]
• OS: [e.g. Windows 10]

Smartphone information
Please complete the following information

• Device: [e.g. iPhone6]
• OS: [e.g. iOS 8.1]
• Browser [e.g. safari]
• Version [e.g. 11]

Additional context
Add any other context about the problem here.

AB#175

Feature - Adding netlify

What is your feature request?
A clear and concise description of what the feature is. Ex. I'm always frustrated when [...]
No possibility to view components for a non developer

Describe the solution you'd like
A clear and concise description of what you want to happen.
Add netlify to view storybook

Additional context
Add any other context or screenshots about the feature request here.
Add commands to handle build on netlify

AB#329