@bonniernews/dn-design-system-web 14.1.0 → 14.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,15 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
## [14.2.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.2.0...@bonniernews/dn-design-system-web@14.2.1) (2024-03-12)
|
|
8
|
+
|
|
9
|
+
## [14.2.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.1.0...@bonniernews/dn-design-system-web@14.2.0) (2024-03-12)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### Features
|
|
13
|
+
|
|
14
|
+
* **web:** tooltip ([#1210](https://github.com/BonnierNews/dn-design-system/issues/1210)) ([0f68d20](https://github.com/BonnierNews/dn-design-system/commit/0f68d20d9d950b42af3931f33b61d6d7260dec7d))
|
|
15
|
+
|
|
7
16
|
## [14.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.0.4...@bonniernews/dn-design-system-web@14.1.0) (2024-03-11)
|
|
8
17
|
|
|
9
18
|
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
# Standard button
|
|
2
|
+
|
|
3
|
+
Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Anatomy
|
|
7
|
+
|
|
8
|
+
1. **Label:** The text displayed on the button, indicating its function.
|
|
9
|
+
2. **Icon** Iconography that enhances the function.
|
|
10
|
+
3. **Background:** The background color or style that defines the button's appearance.
|
|
11
|
+
4. **Border:** The outline surrounding the button, providing visual separation from surrounding elements.
|
|
12
|
+
5. **Shape** The standard shape is rectangular but the component also supports a rounded format.
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## Variants
|
|
16
|
+
|
|
17
|
+
| Variant | How to use |
|
|
18
|
+
| --------- | ---------------------------------------------------------------------------------------------------- |
|
|
19
|
+
| Brand | Extra high emphasis button used for actions that are extra important for the user flow and conversion. I.e. ”Logga in” |
|
|
20
|
+
| Primary | High emphasis button used to attract attention to the most important task of the layout, typically the next step in the user flow. I.e. ”Nästa fråga” in a quiz. |
|
|
21
|
+
| Secondary | Medium emphasis button used for alternative non-primary actions. I.e. ”Alla nyheter” in a list of news. |
|
|
22
|
+
| Outline | Low emphasis Button used for less important actions. Usually used in combination with a primary or brand Button. |
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## Usage
|
|
26
|
+
|
|
27
|
+
Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
### Dos
|
|
31
|
+
|
|
32
|
+
- **Use Primary Buttons for Key Actions:** Employ primary buttons for primary actions within a given context, guiding user focus towards important interactions.
|
|
33
|
+
- **Provide Clear Labeling:** Ensure button labels are concise, descriptive, and indicative of the action they perform, enhancing usability.
|
|
34
|
+
- **Maintain Visual Hierarchy:** Utilize secondary and outline buttons to distinguish lesser actions or provide alternative choices, maintaining a clear visual hierarchy.
|
|
35
|
+
|
|
36
|
+
### Don'ts
|
|
37
|
+
|
|
38
|
+
- **Avoid Ambiguous Labels:** Refrain from using vague or ambiguous labels like ”Fortsätt” that might confuse users about the button's function.
|
|
39
|
+
- **Overuse of Primary Buttons:** Reserve primary buttons for the most crucial actions to avoid overwhelming users with excessive visual weight.
|
|
40
|
+
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
- GitHub: [BonnierNews/dn-design-system/../web/src/components/tooltip](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/tooltip)
|
|
2
|
+
- Storybook: [Tooltip](https://designsystem.dn.se/?path=/docs/basic-tooltip--docs)
|
|
3
|
+
- Storybook (Latest): [Tooltip](https://designsystem-latest.dn.se/?path=/docs/basic-tooltip--docs)
|
|
4
|
+
|
|
5
|
+
----
|
|
6
|
+
|
|
7
|
+
# Tooltip
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
## Parameters
|
|
11
|
+
|
|
12
|
+
|parameter | type | required | options | default | description |
|
|
13
|
+
|:--- | :--- | :--- | :--- | :--- | :--- |
|
|
14
|
+
| arrowPosition | String | yes | "top" or "bottom" | | Position of tooltip arrow |
|
|
15
|
+
| title | String | no | | | Title in tooltip |
|
|
16
|
+
| closeButton | bool | no | true, false | false | Render close button if true |
|
|
17
|
+
| closeOnClickOutside | bool | no | true, false | false | Set to true to be able to close tooltip when clicking outside of it |
|
|
18
|
+
| forceOpen | bool | no | true, false | false | Show tooltip on render |
|
|
19
|
+
| classNames | String | no | | | Ex. "my-special-class" |
|
|
20
|
+
| attributes | Object | no | | | Ex. { data-prop: value } |
|
|
21
|
+
| forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
|
|
22
|
+
|
|
23
|
+
## Minimum requirement example
|
|
24
|
+
|
|
25
|
+
These are copy paste friendly examples to quickliy get started using a component.
|
|
26
|
+
|
|
27
|
+
### Nunjucks
|
|
28
|
+
|
|
29
|
+
```javascript
|
|
30
|
+
{% from '@bonniernews/dn-design-system-web/components/tooltip/tooltip.njk' import Tooltip %}
|
|
31
|
+
|
|
32
|
+
{% call Tooltip({closeButton: true, closeOnClickOutside: false, arrowPosition: "top"}) %}
|
|
33
|
+
<h2>Titel</h2>
|
|
34
|
+
<p>Text i vår tooltip</p>
|
|
35
|
+
{% endcall %}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Scss
|
|
39
|
+
|
|
40
|
+
```scss
|
|
41
|
+
@use "@bonniernews/dn-design-system-web/components/tooltip/tooltip";
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### Javascript
|
|
45
|
+
|
|
46
|
+
```javascript
|
|
47
|
+
import { initTooltip, openTooltip } from '@bonniernews/dn-design-system-web/components/tooltip/tooltip.js'
|
|
48
|
+
const tooltipEl = document.querySelector(".ds-tooltip");
|
|
49
|
+
initTooltip(tooltipEl);
|
|
50
|
+
openTooltip(tooltipEl);
|
|
51
|
+
```
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
export {
|
|
2
|
+
initTooltip,
|
|
3
|
+
openTooltip,
|
|
4
|
+
initTooltipStorybook
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
let setupTooltipClickListener = true;
|
|
8
|
+
|
|
9
|
+
function initTooltip(tooltipEl) {
|
|
10
|
+
const tooltipsClosingOnOutsideClick = document.getElementsByClassName("ds-tooltip--close-outside-click");
|
|
11
|
+
|
|
12
|
+
if (setupTooltipClickListener && tooltipsClosingOnOutsideClick.length > 0) {
|
|
13
|
+
setupTooltipClickListener = false;
|
|
14
|
+
|
|
15
|
+
document.addEventListener("click", (e) => {
|
|
16
|
+
const tooltipClick = e.target.closest(".ds-tooltip");
|
|
17
|
+
if (tooltipClick) return;
|
|
18
|
+
|
|
19
|
+
const tooltipsToClose = document.getElementsByClassName('ds-tooltip--close-outside-click');
|
|
20
|
+
for (const tooltip of tooltipsToClose) {
|
|
21
|
+
closeTooltip(tooltip)
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const closeButtons = Array.from(tooltipEl.getElementsByClassName("ds-tooltip__close"));
|
|
27
|
+
closeButtons.forEach((button) => {
|
|
28
|
+
button.addEventListener("click", () => {
|
|
29
|
+
closeTooltip(tooltipEl);
|
|
30
|
+
});
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
function openTooltip(tooltipEl) {
|
|
35
|
+
tooltipEl.classList.remove("ds-tooltip--hidden");
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function closeTooltip(tooltipEl) {
|
|
39
|
+
tooltipEl.classList.add("ds-tooltip--hidden");
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
function initTooltipStorybook() {
|
|
43
|
+
const tooltips = Array.from(document.getElementsByClassName("ds-tooltip"));
|
|
44
|
+
tooltips.forEach((tooltipEl) => {
|
|
45
|
+
initTooltip(tooltipEl);
|
|
46
|
+
openTooltip(tooltipEl);
|
|
47
|
+
});
|
|
48
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
|
|
2
|
+
{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
|
|
3
|
+
{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
|
|
4
|
+
{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
|
|
5
|
+
|
|
6
|
+
{% macro Tooltip(params) %}
|
|
7
|
+
{% set componentClassName = "ds-tooltip" %}
|
|
8
|
+
|
|
9
|
+
{%- set classes = [
|
|
10
|
+
componentClassName,
|
|
11
|
+
"ds-force-px" if params.forcePx,
|
|
12
|
+
componentClassName + '--arrow-' + params.arrowPosition,
|
|
13
|
+
componentClassName + '--close-outside-click' if params.closeOnClickOutside,
|
|
14
|
+
componentClassName + '--hidden' if not params.forceOpen,
|
|
15
|
+
params.classNames if params.classNames
|
|
16
|
+
] | join(" ") %}
|
|
17
|
+
{% set attributes = getAttributes(params.attributes) %}
|
|
18
|
+
|
|
19
|
+
<div class="{{ classes }}" {{- attributes | safe }}>
|
|
20
|
+
<div class="{{ componentClassName + '__content' }}">
|
|
21
|
+
{% if params.title %}
|
|
22
|
+
<h2>{{ params.title }}</h2>
|
|
23
|
+
{% endif %}
|
|
24
|
+
|
|
25
|
+
{{ caller() if caller }}
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
{% if params.closeButton %}
|
|
29
|
+
{{ IconButton({
|
|
30
|
+
variant: "transparent",
|
|
31
|
+
size: "small",
|
|
32
|
+
iconName: "close",
|
|
33
|
+
classNames: "ds-tooltip__close",
|
|
34
|
+
attributes: { "aria-label": "Stäng" }
|
|
35
|
+
})}}
|
|
36
|
+
{% endif %}
|
|
37
|
+
</div>
|
|
38
|
+
{% endmacro %}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
@use "../../foundations/helpers/forward.helpers.scss" as *;
|
|
2
|
+
@use "../../foundations/variables/typographyFontWeight.scss";
|
|
3
|
+
@use "../../components/icon-sprite/icon-sprite.scss";
|
|
4
|
+
@use "../../components/button/button.scss";
|
|
5
|
+
@use "../../components/icon-button/icon-button.scss";
|
|
6
|
+
|
|
7
|
+
.ds-tooltip {
|
|
8
|
+
background-color: $ds-color-surface-raised;
|
|
9
|
+
color: $ds-color-text-primary;
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
position: relative;
|
|
12
|
+
padding: ds-spacing($ds-s-100);
|
|
13
|
+
display: flex;
|
|
14
|
+
|
|
15
|
+
.ds-tooltip__close {
|
|
16
|
+
color: $ds-color-icon-primary;
|
|
17
|
+
align-self: center;
|
|
18
|
+
margin-left: ds-spacing($ds-s-100);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&--hidden {
|
|
22
|
+
display: none;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&.ds-tooltip--arrow-top::after,
|
|
26
|
+
&.ds-tooltip--arrow-bottom::after {
|
|
27
|
+
border-bottom-color: $ds-color-surface-raised;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&--arrow-top::after {
|
|
31
|
+
content: "";
|
|
32
|
+
position: absolute;
|
|
33
|
+
top: ds-spacing($ds-s-100, "px", true);
|
|
34
|
+
right: ds-spacing($ds-s-100);
|
|
35
|
+
border: 8px solid transparent;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&--arrow-bottom::after {
|
|
39
|
+
content: "";
|
|
40
|
+
position: absolute;
|
|
41
|
+
bottom: ds-spacing($ds-s-100, "px", true);
|
|
42
|
+
left: ds-spacing($ds-s-100);
|
|
43
|
+
border: 8px solid transparent;
|
|
44
|
+
transform: rotate(180deg);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.ds-tooltip__content {
|
|
48
|
+
@include ds-typography($ds-typography-functionalbody01);
|
|
49
|
+
|
|
50
|
+
h2 {
|
|
51
|
+
@include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
|
|
52
|
+
margin: 0;
|
|
53
|
+
|
|
54
|
+
+ p {
|
|
55
|
+
margin-top: 0;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
> :last-child {
|
|
60
|
+
margin-bottom: 0;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
package/package.json
CHANGED