Compare commits

...
Author SHA1 Message Date
github-actions[bot] 145489756d Lerna versionbump [ci skip]
- @navikt/ds-react@0.6.4
2021-07-06 18:53:10 +00:00
Ken 8df7514055 oppdatert focus + role for ikonbruk i komponenter 2021-07-06 20:37:20 +02:00
Ken 614767d5a2 oppdatert specify for icons [ci skip] 2021-07-06 17:10:14 +02:00
Ken fb23dbac85 oppdatert specify for icons [ci skip] 2021-07-06 17:00:10 +02:00
Ken 51acc59fde [ci skip] 2021-07-03 22:36:56 +02:00
Ken a18e62ec95 [ci skip] 2021-07-03 22:18:59 +02:00
Ken 9dc465dc76 Update .specifyrc.json 2021-07-03 22:12:02 +02:00
Ken ffd5023dd9 [ci skip] 2021-07-03 22:07:39 +02:00
Ken 6ae42fccef [ci skip] 2021-07-03 22:07:08 +02:00
Ken 3692c588af [CI SKIP] 2021-07-03 21:57:42 +02:00
Ken e2be70da9b Update .specifyrc.json 2021-07-03 21:51:52 +02:00
Ken dd4c90c24f Create .specifyrc.json 2021-07-03 21:47:51 +02:00
github-actions[bot] c1615a5acd Lerna versionbump [ci skip]
- @navikt/ds-css@0.6.4
2021-07-02 19:46:26 +00:00
Ken c6aef457de Oppdatert accordion-menu styling (#1135) 2021-07-02 21:34:37 +02:00
github-actions[bot] 6f36724570 Lerna versionbump [ci skip]
- @navikt/ds-css@0.6.3
 - @navikt/ds-react@0.6.3
 - @navikt/ds-tokens@0.4.3
 - nav-frontend-ikonknapper@2.0.2
 - nav-frontend-knapper-style@2.0.2
 - nav-frontend-knapper@3.0.2
 - nav-frontend-tabell-style@2.0.2
 - nav-frontend-toggle-style@2.0.2
 - nav-frontend-toggle@2.0.2
2021-07-02 15:03:44 +00:00
Ken 91b956d8c2 Button styling + oppdatert styling for ds-react komponenter (#1134) 2021-07-02 16:50:09 +02:00
Ken c9d70ebd1c Update README.md 2021-06-24 09:02:56 +02:00
25 changed files with 187 additions and 209 deletions

No files matched your search

+57
View File
@@ -0,0 +1,57 @@
{
"repository": "@nav/designsystem",
"head": "updated-specify-tokens",
"base": "master",
"rules": [
{
"name": "Specify / Icons",
"path": "@navikt/ds-icons/svg",
"filter": {
"types": ["vector"]
},
"parsers": [
{
"name": "pascalcasify",
"options": {
"keys": ["name"]
}
},
{
"name": "name-assets-files-by-pattern",
"options": {
"pattern": "{{name}}.{{format}}"
}
}
]
},
{
"name": "Specify / Icons - metadata",
"path": "@navikt/ds-icons/figma-api/metadata-specify.json",
"filter": {
"types": ["vector"]
},
"parsers": [
{
"name": "pascalcasify",
"options": {
"keys": ["name"]
}
},
{
"name": "pick",
"options": {
"keys": [
"name",
"createdAt",
"updatedAt",
"meta.description",
"meta.parentFrame",
"meta.frame",
"page"
]
}
}
]
}
]
}
+3 -10
View File
@@ -22,18 +22,11 @@
text-decoration: underline;
}
.navds-accordion-menu-collapsable .navds-accordion-menu__list,
.navds-accordion-menu-collapsable
.navds-accordion-menu-collapsable
.navds-accordion-menu-collapsable__button {
font-weight: var(--navds-font-weight-regular);
}
.navds-accordion-menu-item,
.navds-accordion-menu-collapsable__button {
display: flex;
padding: var(--navds-spacing-3) var(--navds-spacing-4);
line-height: 1.5rem; /* TODO: fix typography. */
text-decoration: none;
}
.navds-accordion-menu-collapsable__expand-icon {
@@ -82,16 +75,16 @@
.navds-accordion-menu-collapsable__button:focus {
outline: 3px solid var(--navds-text-focus);
outline-offset: -3px;
color: var(--navds-color-darkgray);
}
.navds-accordion-menu-item:hover,
.navds-accordion-menu-collapsable__button:hover {
background-color: var(--navds-color-gray-20);
background-color: var(--navds-color-blue-10);
}
.navds-accordion-menu-item--active {
box-shadow: inset 0.5rem 0 var(--navds-color-text-link);
color: var(--navds-color-text);
text-decoration: none;
font-weight: var(--navds-font-weight-bold);
}
+18 -7
View File
@@ -5,14 +5,12 @@
.navds-accordion {
position: relative;
background: var(--navds-color-background);
border: var(--navds-border-default);
border-radius: 4px;
border-bottom: 2px solid #c9c9c9;
}
.navds-accordion:hover {
box-shadow: var(--navds-color-hover);
border: var(--navds-panel-hover);
color: black;
/* color: black; */
border-bottom: 2px solid var(--navds-color-blue-50);
}
.navds-accordion:focus,
@@ -39,16 +37,16 @@
.navds-accordion__button {
padding: var(--navds-spacing-4);
border-radius: 4px;
background: transparent;
border: 0;
text-align: left;
border: none;
width: 100%;
margin-bottom: 0;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--navds-color-text-link);
}
.navds-accordion__button:hover .navds-accordion__heading {
@@ -69,3 +67,16 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.navds-accordion__chevron--filled {
display: none;
}
.navds-accordion__button:hover
> .navds-accordion__chevron.navds-accordion__chevron--filled {
display: inherit;
}
.navds-accordion__button:hover > .navds-accordion__chevron {
display: none;
}
+5 -5
View File
@@ -2,20 +2,20 @@
border-radius: 4px;
border: var(--navds-border-default);
/* Padding calculated based on 16px font for 64px tall alert */
padding: 1.1875rem var(--navds-spacing-4);
/* Padding calculated based on 18px font for 64px tall alert */
padding: 1.0625rem var(--navds-spacing-4);
display: grid;
grid-auto-flow: column;
column-gap: 0.75rem;
justify-content: start;
}
.navds-alert--s {
border-radius: 0;
padding: var(--navds-spacing-2) var(--navds-spacing-4);
padding: 0.1875rem var(--navds-spacing-4);
}
.navds-alert > svg {
align-self: center;
margin-right: var(--navds-spacing-3);
font-size: 1.5rem;
background: radial-gradient(
circle,
+11 -157
View File
@@ -12,12 +12,12 @@
border-width: 2px;
/* Padding calculated based on 18px font for 44px tall button */
padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
padding: 0.65625rem var(--navds-spacing-3);
}
.navds-button--s {
/* Padding calculated based on 16px font for 32px tall button */
padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
padding: 0.25rem calc(var(--navds-spacing-4) - 2px);
}
.navds-button:focus {
@@ -33,16 +33,16 @@
.navds-button--primary:active {
color: var(--navds-color-text-inverse);
background-color: var(--navds-color-action-hover);
border-width: 0;
border-color: transparent;
/* Padding calculated based on 18px font for 44px tall button */
padding: 0.625rem var(--navds-spacing-8);
padding: 0.53125rem var(--navds-spacing-3);
}
.navds-button--primary:hover.navds-button--s,
.navds-button--primary:active.navds-button--s {
/* Padding calculated based on 16px font for 32px tall button */
padding: 0.3125rem var(--navds-spacing-4);
padding: 0.25rem calc(var(--navds-spacing-4) - 2px);
}
.navds-button--primary:active {
@@ -86,42 +86,18 @@
.navds-button--action,
.navds-button--danger {
/* Padding calculated based on 18px font for 44px tall button */
padding: 0.625rem var(--navds-spacing-8);
border-width: 0;
transform: translateY(calc(-1 * 2px));
position: relative;
color: var(--navds-color-text-inverse);
}
.navds-button--action.navds-button--s,
.navds-button--danger.navds-button--s {
/* Padding calculated based on 16px font for 32px tall button */
padding: 0.3125rem var(--navds-spacing-4);
}
.navds-button--action:not(:focus),
.navds-button--danger:not(:focus) {
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 2px 0 rgba(0, 0, 0, 0.25);
color: white;
border-width: 1px;
}
.navds-button--action:hover {
background-color: var(--navds-color-action-hover);
border-color: var(--navds-color-action-hover);
}
.navds-button--danger:hover {
background-color: var(--navds-color-danger-hover);
}
.navds-button--danger:hover,
.navds-button--action:hover {
transform: translateY(calc(-1 * 3px));
position: relative;
}
.navds-button--action:hover:not(:focus),
.navds-button--danger:hover:not(:focus) {
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 3px 0 rgba(0, 0, 0, 0.25);
border-color: var(--navds-color-danger-hover);
}
.navds-button--action:active {
@@ -132,131 +108,9 @@
background-color: var(--navds-color-danger-active);
}
.navds-button--action:active,
.navds-button--danger:active {
transform: translateY(0);
position: relative;
}
.navds-button--action:active:not(:focus),
.navds-button--danger:active:not(:focus) {
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 0 0 rgba(0, 0, 0, 0.25);
}
.navds-button--action:focus {
color: var(--navds-color-action-default);
background-color: var(--navds-color-background);
}
.navds-button--action:focus,
.navds-button--danger:focus {
color: var(--navds-color-danger-default);
background-color: var(--navds-color-background);
}
.navds-button--danger:focus,
.navds-button--action:focus {
/* Padding calculated based on 18px font for 44px tall button */
padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
transform: translateY(calc(-1 * 2px));
position: relative;
border-width: 2px;
}
.navds-button--action:focus.navds-button--s,
.navds-button--danger:focus.navds-button--s {
/* Padding calculated based on 16px font for 32px tall button */
padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
}
.navds-button--action:hover:focus {
background-color: var(--navds-color-action-hover);
}
.navds-button--danger:hover:focus {
background-color: var(--navds-color-danger-hover);
}
.navds-button--action:hover:focus,
.navds-button--danger:hover:focus {
/* Padding calculated based on 18px font for 44px tall button */
padding: 0.625rem var(--navds-spacing-8);
border-width: 0;
color: var(--navds-color-text-inverse);
}
.navds-button--action:hover:focus.navds-button--s,
.navds-button--danger:hover:focus.navds-button--s {
/* Padding calculated based on 16px font for 32px tall button */
padding: 0.3125rem var(--navds-spacing-4);
}
.navds-button--action:active:focus {
color: var(--navds-color-action-active);
border-color: var(--navds-color-action-active);
}
.navds-button--danger:active:focus {
color: var(--navds-color-danger-active);
border-color: var(--navds-color-danger-active);
}
.navds-button--action:active:focus,
.navds-button--danger:active:focus {
/* Padding calculated based on 18px font for 44px tall button */
padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
transform: translateY(0);
position: relative;
border-width: 2px;
background-color: var(--navds-color-background);
}
.navds-button--action:active:focus.navds-button--s,
.navds-button--danger:active:focus.navds-button--s {
/* Padding calculated based on 16px font for 32px tall button */
padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
}
.navds-button--action:hover:focus:active {
color: var(--navds-color-text-inverse);
background-color: var(--navds-color-action-active);
}
.navds-button--danger:hover:focus:active {
color: var(--navds-color-text-inverse);
background-color: var(--navds-color-danger-active);
}
/**************************
* ::before *
**************************/
.navds-button--action::before,
.navds-button--danger::before {
bottom: calc(-1 * 2px);
height: 2px;
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
}
.navds-button--action:hover::before,
.navds-button--danger:hover::before {
bottom: calc(-1 * 3px);
height: 3px;
}
.navds-button--action:focus::before,
.navds-button--danger:focus::before {
bottom: calc(-1 * 2px);
height: 2px;
}
.navds-button--action:active::before,
.navds-button--danger:active::before {
bottom: 0;
height: 0;
border-color: white;
}
/**************************
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-css",
"version": "0.6.2",
"version": "0.6.4",
"private": false,
"description": "Css for NAV Designsystem components",
"author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
"watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
},
"devDependencies": {
"@navikt/ds-tokens": "^0.4.2",
"@navikt/ds-tokens": "^0.4.3",
"normalize.css": "^8.0.1",
"postcss": "^8.2.7",
"postcss-cli": "^8.3.1",
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-react",
"version": "0.6.2",
"version": "0.6.4",
"private": false,
"description": "NAV designsystem react components",
"author": "NAV Designsystem team",
@@ -32,6 +32,7 @@ const AccordionMenuCollapsable = forwardRef<
{title}
<Expand
role="img"
focusable="false"
aria-label={isOpen ? "Pil peker opp" : "Pil peker ned"}
className="navds-accordion-menu-collapsable__expand-icon"
/>
+12 -1
View File
@@ -1,7 +1,7 @@
import React, { forwardRef, useEffect, useState } from "react";
import cl from "classnames";
import { UnmountClosed, Collapse } from "react-collapse";
import { Expand } from "@navikt/ds-icons";
import { Expand, ExpandFilled } from "@navikt/ds-icons";
import { v4 as uuidv4 } from "uuid";
export interface AccordionProps
@@ -88,11 +88,22 @@ const Accordion = forwardRef<HTMLButtonElement, AccordionProps>(
{heading}
</span>
<Expand
focusable="false"
role="img"
className={cl(
"navds-accordion__chevron",
`navds-accordion__chevron--${internalOpen ? "up" : "down"}`
)}
/>
<ExpandFilled
focusable="false"
role="img"
className={cl(
"navds-accordion__chevron",
"navds-accordion__chevron--filled",
`navds-accordion__chevron--${internalOpen ? "up" : "down"}`
)}
/>
</button>
<div id={contentId} role="region" aria-labelledby={buttonId}>
<CollapseComponent isOpened={internalOpen}>
+5 -5
View File
@@ -30,13 +30,13 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
const Icon = ({ variant }) => {
switch (variant) {
case "error":
return <ErrorFilled />;
return <ErrorFilled focusable="false" role="img" />;
case "warning":
return <WarningFilled />;
return <WarningFilled focusable="false" role="img" />;
case "info":
return <InformationFilled />;
return <InformationFilled focusable="false" role="img" />;
case "success":
return <SuccessFilled />;
return <SuccessFilled focusable="false" role="img" />;
default:
return null;
}
@@ -52,7 +52,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
`navds-alert--${variant}`,
`navds-alert--${size}`,
"navds-body-long",
"navds-body--s"
{ "navds-body--s": size === "s" }
)}
{...rest}
>
+2 -1
View File
@@ -36,7 +36,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
"navds-button",
`navds-button--${variant}`,
`navds-button--${size}`,
"navds-body-short"
"navds-body-short",
{ "navds-body--s": size === "s" }
)}
{...rest}
/>
@@ -52,7 +52,7 @@ export const All = () => {
{variants.map((variant) => (
<a
key={variant}
className={`navds-button navds-button--${variant}`}
className={`navds-button navds-button--${variant} navds-body-short`}
href="the-link"
>
{variant}
@@ -61,7 +61,15 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
onClick={handleClick}
{...rest}
>
{icon ? <>{icon}</> : <Copy aria-label="Fil ikon for kopiering" />}
{icon ? (
<>{icon}</>
) : (
<Copy
focusable="false"
role="img"
aria-label="Fil ikon for kopiering"
/>
)}
{children ? children : <span className="sr-only">{title}</span>}
</Button>
<Popover
+5 -1
View File
@@ -86,7 +86,11 @@ const Modal: ModalLifecycle &
aria-label="lukk modalvindu"
onClick={onClose}
>
<Close />
<Close
focusable="false"
role="img"
aria-label="X-ikon for å lukke modal"
/>
</Button>
</ReactModal>
);
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-tokens",
"version": "0.4.2",
"version": "0.4.3",
"private": false,
"description": "Auto-generated design-tokens for NAV design-systems framework",
"author": "NAV Designsystem team",
+2 -2
View File
@@ -68,12 +68,12 @@ module.exports = {
disabled: { value: "{navds.color.gray.40.value}" },
action: {
default: { value: "{navds.color.blue.50.value}" },
hover: { value: Color(baseColors.blue).lighten(0.1) },
hover: { value: "{navds.color.blue.60.value}" },
active: { value: "{navds.color.deepblue.50.value}" },
},
danger: {
default: { value: "{navds.color.red.50.value}" },
hover: { value: Color(baseColors.red).lighten(0.1) },
hover: { value: "{navds.color.red.60.value}" },
active: { value: "{navds.color.red.70.value}" },
},
error: {
+1 -1
View File
@@ -11,7 +11,7 @@
<a href="https://github.com/navikt/nav-frontend-moduler/pulls">
<img src="https://img.shields.io/badge/PRs-welcome-green.svg" />
</a>
<img src="https://github.com/navikt/nav-frontend-moduler/workflows/Build,%20test%20and%20maybe%20publish/badge.svg" />
<img src="https://github.com/navikt/nav-frontend-moduler/workflows/Build,%20test%20and%20maybe%20publish/badge.svg" />
</p>
<h4><a href="https://design.nav.no">Nettside</a> | <a href="https://github.com/navikt/nav-frontend-moduler/blob/master/CONTRIBUTING.md">Bidra</a> | <a href="https://github.com/navikt/nav-frontend-moduler/issues">Bug-rapport</a>
</div>
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-ikonknapper",
"version": "2.0.1",
"version": "2.0.2",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"license": "MIT",
@@ -25,7 +25,7 @@
"devDependencies": {
"nav-frontend-chevron": "^1.0.30",
"nav-frontend-ikoner-assets": "^3.0.1",
"nav-frontend-knapper": "^3.0.1",
"nav-frontend-knapper": "^3.0.2",
"react": "^16.8.0 || ^17.0.0"
}
}
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-knapper-style",
"version": "2.0.1",
"version": "2.0.2",
"main": "src/index.less",
"license": "MIT",
"files": [
@@ -12,11 +12,11 @@
}
.knapp--hoved {
.knappfylt-mixin(@navBla, @white, @navDypBla, lighten(@navBla, 5%));
.knappefylt-cta-mixin(@navBla, @navBlaDarken20, @navDypBla);
}
.knapp--fare {
.knappfylt-mixin(@redError, @white, darken(@redError, 5%), lighten(@redError, 5%));
.knappefylt-cta-mixin(@redError, @redErrorDarken20, @redErrorDarken40);
}
.knapp--flat {
@@ -64,6 +64,44 @@
}
}
.knappefylt-cta-mixin(@bgColor, @hoverColor, @activeColor) {
color: white;
border-color: @bgColor;
background-color: @bgColor;
position: relative;
border-width: 1px;
&:hover {
background-color: @hoverColor;
border-color: @hoverColor;
}
&:hover&:focus {
background-color: @hoverColor;
border-color: @hoverColor;
border-color: white;
}
&:focus {
outline: none;
border-color: white;
box-shadow: 0 0 0 3px @fokusFarge;
}
&:active {
background-color: @activeColor;
border-color: transparent;
border-color: white;
}
&:hover&:focus&:active {
background-color: @activeColor;
border-color: @activeColor;
border-color: white;
}
}
/* Beholdes i kode for å unngå breaking change */
.knappfylt-mixin(@bgColor, @textColor, @activeColor, @highlighColor) {
.knapptaktil-mixin();
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-knapper",
"version": "3.0.1",
"version": "3.0.2",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"license": "MIT",
@@ -28,7 +28,7 @@
"@types/react": "15.0.23 || ^16.0.0",
"classnames": "^2.2.5",
"nav-frontend-js-utils": "^1.0.19",
"nav-frontend-knapper-style": "^2.0.1",
"nav-frontend-knapper-style": "^2.0.2",
"prop-types": "^15.5.10",
"react": "^16.8.0 || ^17.0.0"
},
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-tabell-style",
"version": "2.0.1",
"version": "2.0.2",
"main": "src/index.less",
"license": "MIT",
"files": [
@@ -21,7 +21,7 @@
},
"devDependencies": {
"nav-frontend-core": "^6.0.1",
"nav-frontend-knapper-style": "^2.0.1",
"nav-frontend-knapper-style": "^2.0.2",
"nav-frontend-typografi-style": "^2.0.1"
}
}
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-toggle-style",
"version": "2.0.1",
"version": "2.0.2",
"main": "src/toggle-style.less",
"license": "MIT",
"files": [
@@ -17,7 +17,7 @@
},
"devDependencies": {
"nav-frontend-core": "^6.0.1",
"nav-frontend-knapper-style": "^2.0.1",
"nav-frontend-knapper-style": "^2.0.2",
"nav-frontend-typografi-style": "^2.0.1"
}
}
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-toggle",
"version": "2.0.1",
"version": "2.0.2",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"license": "MIT",
@@ -22,7 +22,7 @@
"devDependencies": {
"classnames": "^2.2.5",
"nav-frontend-js-utils": "^1.0.19",
"nav-frontend-toggle-style": "^2.0.1",
"nav-frontend-toggle-style": "^2.0.2",
"prop-types": "^15.5.10",
"react": "^16.8.0 || ^17.0.0"
}