sebgroup / ng-components Goto Github PK

Design review 2019-03-27

There is a new button variation. There are two versions:

Delete button

• Standard (with or without icon) - More subtle. A red garbage can and red text lable (i.e "Delete"). Hover is red blocked.
• Confirm - Stands out. Red box, white text, hover is lighter red. Can be in a dialogue.

Specification

For complete specification, see Design library: https://designlibrary.sebgroup.com/components/forms/button/#usage
Component identifier: component-button

Thank you!
Ulrika, Design Management

Description

Running npm install after cloning this repo will end up failing because these repositories are private inside SEB network:

• @fortawesome/fontawesome-svg-core
• @fortawesome/pro-light-svg-icons

Since this repo is supposed to be open source, I think these should be removed and replaced by an open-source icon library

• Basic dropdown component and service?
• Should be possible to use custom container i.e. attach dropdown to body etc.
• Use bootstrap class names and markup by default
• Add/remove class to body when dropdown is shown/hidden
• Use body-scroll-lock to prevent background scroll on mobile devices
• Ability to pass custom template
• Ability to use position i.e. top, left, right etc.
• Support for multi-select with checkboxes
• Support for typeahead (filter options using input field)

(Moved from https://github.sebank.se/DesignLibrary/AngularComponents/issues/56)

Design change 2019-01-30

This change was reviewed in Design Working Group:

• The error indicator for input fields have a 2 px line (#D81A1A) at the bottom
• No frame or shadow (as in Bootstrap)
• No error indication icon in the text field

The reasoning for changing the line from 4 px to 2 px is that the line was too hefty, especially when there were many fields lighting up at the same time. We try this for now and evaluate. Please give us feedback so we can learn in time for the next update.

/Ulrika,
Design Management

Discussion: sebgroup/design-library#13

• Add npm and github token for Travis
• Add and configure semantic release
• Add commitizen
• Add husky and commit lint

See this article for more info

Design update 2019-10-25

The design of the tab component has been adjusted:

• States for hover and focused have been updated
• Overflow tab is left-aligned (used to be right-aligned)

Mobile version

• The arrow is moved into the tab and a tiny line is added to look like a tab
• Instruction is clarified: Feel free to display more than one tab in a mobile. If there are too many tabs for the width that calls for an overflow menu, then only the active tab is presented (with arrow).

See the specification to get the correct details:
https://designlibrary.sebgroup.com/components/tab/#specification

Original discussion
sebgroup/design-library#66

Thank you @TheresaHedlund for working on this!

Any feedback? Do contact [email protected]
Ulrika,
Design Management

Design review March 27

The accordion has been updated.

Change

• The green “tab border” is removed
• Font in header is 20 px, with the option of a sub header (14 px)
• Header cell height: if header only 48 px, if sub header 64 px
• Grey hover is added on the header cell
• Content background is still white/none, with the option to make it grey
• Chevron (FontAwesome Light) points up/down (not right/down)
• Guidelines now include: "Use this component mainly for text content"

Reason
Many reasons. First of all, it was time to specify the component better. We have adjusted to fit users’ need with more efficient use of space. The direction of chevron is updated to show how it is animated. We also noticed that the component has been (too) content-heavy and added clearer guidelines.

Specification
https://designlibrary.sebgroup.com/components/accordion/

Let us know if you have any questions!
/Ulrika
Design management

Dependabot couldn't authenticate with registry.npmjs.org.

You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.

View the update logs.

Dependabot couldn't authenticate with registry.npmjs.org.

You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.

View the update logs.

Design update 2019-10-01

To align with the other form components, pls update the height to 44 px for

• Checkboxes
• Radio buttons

Original discussion: sebgroup/design-library#16

Thanks!
/Ulrika, Design management

First version:

• Basic modal component and service?
• Modal should be added to body
• Use bootstrap class names and markup by default
• Add/remove class to body when modal is shown/hidden
• Use body-scroll-lock to prevent background scroll on mobile devices
• Ability to pass modal type (aside, fullscreen etc).
• Ability to toggle close button in upper right corner next to heading
• Ability to pass text for heading, body
• Ability to pass array with buttons to be rendered in footer
• Ability to pass custom template
• Ability to pass size (sm, md, lg)?
• Ability to pass custom container if modal shouldn't attach to body
• Add a query string when popup opens, to be able to add a page into browser history and back btn naturally closes the popup.

(Moved from https://github.sebank.se/DesignLibrary/AngularComponents/issues/55)

Design change 2019-01-30

This issue was reviewed today in Design Working Group. We decided the following change:

• Form components (Input Field, Drop Down, Medium Button, Segmented Control and Stepper) all have the same height: 44 px
• This applies to both desktop and mobile

The reasoning for this is that when labels got bigger, the form components follow in size to harmonise and match. Also, the mobile click area needed to be bigger so we want them to be the same size, to simplify and have fewer options (=easier to do it right).

Discussion: sebgroup/design-library#16

Thank you!
/Ulrika, Design Management

Change

The button Button link used to be called Alternative button.

Reason

The name Button link says what it is.

See the full specification here:
https://designlibrary.sebgroup.com/components/forms/button/

Feel free to update this in your frameworks so that we use the same language on components. If this is not relevant to you, please close the issue with a comment. Thank you!

/Ulrika,
Design Management team

Dependabot couldn't authenticate with registry.npmjs.org.

You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.

View the update logs.

(Moved from https://github.sebank.se/DesignLibrary/AngularComponents/issues/63)

Design change 2019-03-13

The design update on Toggle selector was reviewed March 13:

Change

• Updated name: from Toggle button to Toggle selector
• Updated identifier: component-toggleselector
• Updated description of use
• Updated size and colours

See the details in the description: https://designlibrary.sebgroup.com/components/toggle-selector/

Reason
Analytics showed that the component was overlooked by users. It was unclear that the component was clickable.

Thanks!
/Ulrika,
Design Management

Dependabot couldn't authenticate with registry.npmjs.org.

You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.

View the update logs.

Proposal:
Use mixins to conditional add styles for third party libraries that we support such as ng-bootstrap and ngx-toastr, avoid wrapping them unless we actually add value or build something around the component.

Dependabot couldn't authenticate with registry.npmjs.org.

You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.

View the update logs.

Dependabot couldn't authenticate with registry.npmjs.org.

You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.

View the update logs.

Dependabot couldn't authenticate with registry.npmjs.org.

You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.

View the update logs.

Dependabot couldn't authenticate with registry.npmjs.org.

You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.

View the update logs.

Dependabot couldn't authenticate with registry.npmjs.org.

You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.

View the update logs.

We need to decide on and agree on a naming convention for the following:

• Component prefix
• Pattern for markup
• SASS variables

Anything else?

Proposal to start the discussion

Component prefix

• sebng-
• sng-
• ngs-
• ngseb-

Pattern for markup

I'd propose that we try and follow/adhere to bootstrap markup where its applicable i.e. a button should use .btn for default button behavior and can be combined with for example .btn-primary (modifier) to declare a primary button. If we invent a custom button we should still stick to this pattern and follow the BEM filosophy which for bootstrap is slightly adjusted i.e.

<button class="btn btn-primary">A button</button>

Instead of the more "strict":

<button class="btn btn--primary">A button</button>

Pros:

• Widely known and used by many, competence can be found outside SEB
• Ability to use third party libraries built using bootstrap markup
• Ability for others to reuse our components with there own theme
  ?

Cons:

• Might be restricted by bootstrap markup
• Possible conflicts
  ?

SASS variables

Reuse variables from bootstrap and other libraries but declare them using default value using same pattern as for prefix i.e.:

$ngseb-table-cell-padding: $table-cell-padding !default;

• Markup and naming conventions #5
• Third party libraries #9 #10
• Structure and demo #3 #2
• ?

Dependabot couldn't authenticate with registry.npmjs.org.

You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.

View the update logs.

First version:

• Suport for sizes xs, sm, md, lg, xl (no size should default to md)
• Support for ovleray/fullscreen

Design update 2020-01-13

What is this?
This component calls attention to a status/tag/category.

Details
See the specification to get all the right details:
https://designlibrary.sebgroup.com/components/badge/

Component identifier
component-badge

Thank you!
/Ulrika

Description

When working in a project that requires support for accessibility features like a screen reader, these components should have all the necessary flags like aria- flags to support accessibility features. Form components should be focusable with pressing tab and collapsable items should declare its state and the new content of the changed area. The HTML markup should be used semantically so that screen readers can identify what the user is hovering over.

I believe this feature must be incorporated from the start instead of leaving it to the end since some of these changes might cause a major restructuring if it were to be implemented later.

References

https://developer.mozilla.org/en-US/docs/Web/Accessibility
https://www.w3.org/WAI/standards-guidelines/wcag/

Component review 2019-10-08

There are two small and important changes on table design:

• Bigger table header font: 16 px, medium, Grey 2 (#333333)
• New sorting icon: Normal = Grey 7 (#B2B3B3), Selected= Dark Blue 2 (#007AC7), Hover = Blue (#41B0EE)
• The sorting icon is FontAwesome solid "chevron-up" and solid "chevron-down", on top of each other, width 10 x height 16 px (together)

There is more to come, but these changes are the most urgent. So the rest of what we know about tables stays the same for now.

Thank you!
/Ulrika
Design Management

Dependabot couldn't authenticate with registry.npmjs.org.

You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.

View the update logs.

Design review 2019-03-27

We are changing the name of the Toggle switch to Slide toggle and would like to you update the identifier:

• Update component-identifier from "component-toggleswitch" to "component-slidetoggle"

Reason
To match convention in other frameworks. It also makes sense to change the identifier.

Description: https://designlibrary.sebgroup.com/components/slide-toggle/#usage

(Moved from https://github.sebank.se/DesignLibrary/AngularComponents/issues/44)

As of 2018-12-11

Labels
font size: 16 px (1 rem)
weight: medium
line height: 20 px*
distance from input border to label: 8 px*

Input instruction
font size: 14 px (.875 rem)
weight: regular
line height: 20 px*
distance from input border to instruction: 8 px*

Input error text
font size: 14 px (.875)
weight: regular
line height: 20*
distance from input border to error text: 8 px*

*Note that 8 pixles and line height 20 refers to actual pixels in design and not margin-bottom: 8 pixels and line height in browser, due to line height affecting actual space between input and text.

(Moved from https://github.sebank.se/DesignLibrary/AngularComponents/issues/49)

Following adjustment to typography has been made 2019-01-21:

H2
weight: bold

H3
weight: bold

New

• Line height is specified (it was not before) for desktop, mobile and tablet
• The biggest text size, "Display", is also available for mobile and tablet
• "Preample" is specified (it was not before) for desktop, mobile and tablet

If you are unsure, please see the complete list of sizes and line-height for each size: http://designlibrary.sebgroup.com/visual-identity/typography/#usage (scroll down on the page)

Ask us anything (about this)!
Thank you,
Ulrika, Design management

Dependabot couldn't authenticate with registry.npmjs.org.

You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.

View the update logs.

Dependabot couldn't authenticate with registry.npmjs.org.

You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.

View the update logs.

(Moved from https://github.sebank.se/DesignLibrary/AngularComponents/issues/57)

Design change 2019-02-13

The Ghost button is updated to two versions:

Ghost button light

• Transparent with a "White" outline (1 px).
• On hover: Background and outline is "Grey 2".

Ghost button dark

• Transparent with a "Grey 2" outline (1 px)
• On hover: Background and outline is "White".

Reason:
The instruction for the Ghost button is clarified. It is used on coloured background and photographs. Ghost light is for darker backgrounds, and Ghost dark for lighter backgrounds.

Discussion:
sebgroup/design-library#35

Design Library description:
http://designlibrary.sebank.se/components/forms/button/#usage

Thank you!
/Ulrika
Design management

Pattern (sep 2019)
A pattern that describes a uniform way for the user to add both soft and hard properties. This two-step pattern is especially useful in pages where the user has to manually update values.

A white card triggers a slide-out. Use is the same behaviour for all devices.

Details
See the measurements (etc) in Design Library:
https://designlibrary.sebgroup.com/patterns/crud/#usage
Design library identifier: component-crud

Any questions or feedback? /Ulrika, [email protected]

Change

The error indicator for checkbox and radio button have been defined. The component and label text are framed in red border. Red error text is placed under and near the component.

Reason

To synk our error indicators across all our sites and apps.

Details

https://designlibrary.sebgroup.com/components/forms/checkbox/#specification
https://designlibrary.sebgroup.com/components/forms/radio-button/

If this is not relevant to you, please close the issue with a comment. Thank you!

/Ulrika,
Design Management team

Decision from the Design review May 8

The dropdown now has another version that allows multiple selections.

Full specification
See states and sizes here: https://designlibrary.sebgroup.com/components/forms/dropdown/#styles

Component identifier
component-dropdown

Thank you! :)
Ulrika
Design management

Design decision 2019-09-09

After a long period of testing, we have now updated the Alert ribbon component. See the full description for the details (measurements, colour codes, etc):

https://designlibrary.sebgroup.com/components/alerts/alert-ribbons/#guidelines

Changes in short

• New colours - make sure you use the correct colour codes (see the Styles tab in the link above)
• We are no longer using purple as a colour. Use grey instead.
• New alert state - "Success" (green)
• Updated state names. Decide for yourself if you want to sync the names:
  -- "Information" (grey, used to be "Whisper")
  -- "Success" (green, new state)
  -- "Warning" (yellow, used to be "Talk")
  -- "Critical" (red, used to be "Shout")
• New icons - find the icon names in the Styles tab (link above). Use FontAwesome "Solid" (which is an exception from all other icons that are "Regular").
• Updated measurements - see the Styles tab in the link above
• Added recommendation for using grey alert on grey background

Reasons

Feedback from user tests and usage from several channels, saying that purple was too loud. We also learned that the description in Design Library generally was too confusing. And we hade a design synk between Bootstrap and Design Library which generated sensible updates for both.

Let me know if anything is unclear. Thank you!
Ulrika,
Design Management

Design update 2020-01-13

What is this?
A new component to display a filter

Details
See the specification to get all the right details:
https://designlibrary.sebgroup.com/components/chips/#specification

Component identifier
component-chip

Thank you!
/Ulrika