Compare commits

..
Author SHA1 Message Date
github-actions[bot]andgithub-actions[bot] e2a9d027dc Version Packages (#1749)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2023-01-17 10:32:23 +01:00
Ken 22dfd8e603 :sparkled: Prop for posisjonering av toptekst i Chat (#1748)
* :sparkled: Prop for posisjonering av toptekst i Chat

* 📝 changeset

* 📝 Docs

* 📝 Demo

* 🎨 fliptoptext -> toptextPosition
2023-01-17 10:26:14 +01:00
Ken 53d1947311 📝 Tekstendringer sanity profilside 2023-01-17 09:39:38 +01:00
Ken d4e7c47772 🎨 Sanity feedback preview 2023-01-17 07:37:20 +01:00
Ken e191dffdf8 🔥 Fjernet dårlige editor-navn 2023-01-16 09:12:05 +01:00
Ken 7e0ee60d47 🔥 Fjernet dårlige editor-navn 2023-01-16 08:57:11 +01:00
28 changed files with 231 additions and 67 deletions

No files matched your search

+2
View File
@@ -1,5 +1,7 @@
# @navikt/ds-codemod
## 2.0.15
## 2.0.14
## 2.0.13
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-codemod",
"version": "2.0.14",
"version": "2.0.15",
"description": "Aksel codemods for NAVs designsystem",
"author": "Aksel | NAV designsystem team",
"license": "MIT",
+2 -2
View File
@@ -39,8 +39,8 @@
"build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
},
"dependencies": {
"@navikt/ds-icons": "^2.0.14",
"@navikt/ds-react": "^2.0.14",
"@navikt/ds-icons": "^2.0.15",
"@navikt/ds-react": "^2.0.15",
"clsx": "^1.1.1"
},
"devDependencies": {
+6
View File
@@ -1,5 +1,11 @@
# @navikt/ds-css
## 2.0.15
### Patch Changes
- [#1748](https://github.com/navikt/Designsystemet/pull/1748) [`22dfd8e60`](https://github.com/navikt/Designsystemet/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
## 2.0.14
## 2.0.13
+16
View File
@@ -77,6 +77,22 @@
align-self: flex-end;
}
.navds-chat--top-text-left .navds-chat__top-text {
align-self: flex-start;
}
.navds-chat--top-text-right .navds-chat__top-text {
align-self: flex-end;
}
.navds-chat--left .navds-chat__top-text--right {
align-self: flex-end;
}
.navds-chat--right .navds-chat__top-text--left {
align-self: flex-start;
}
.navds-chat__name {
font-weight: var(--a-font-weight-bold);
}
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-css",
"version": "2.0.14",
"version": "2.0.15",
"description": "CSS for NAV Designsystem",
"author": "Aksel | NAV designsystem team",
"keywords": [
@@ -20,7 +20,7 @@
"watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
},
"devDependencies": {
"@navikt/ds-tokens": "^2.0.14",
"@navikt/ds-tokens": "^2.0.15",
"normalize.css": "^8.0.1",
"postcss": "^8.4.0",
"postcss-cli": "^9.0.0",
+9
View File
@@ -1,5 +1,14 @@
# @navikt/ds-react
## 2.0.15
### Patch Changes
- [#1748](https://github.com/navikt/Designsystemet/pull/1748) [`22dfd8e60`](https://github.com/navikt/Designsystemet/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
- Updated dependencies []:
- @navikt/ds-icons@2.0.15
## 2.0.14
### Patch Changes
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-react",
"version": "2.0.14",
"version": "2.0.15",
"description": "Aksel react-components for NAV designsystem",
"author": "Aksel | NAV designsystem team",
"license": "MIT",
@@ -37,7 +37,7 @@
},
"dependencies": {
"@floating-ui/react": "0.17.0",
"@navikt/ds-icons": "^2.0.14",
"@navikt/ds-icons": "^2.0.15",
"@radix-ui/react-tabs": "1.0.0",
"@radix-ui/react-toggle-group": "1.0.0",
"clsx": "^1.2.1",
+22 -2
View File
@@ -19,6 +19,10 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
* Background color on bubble
*/
backgroundColor?: string;
/**
* Overrides hoizontal position of toptext
*/
toptextPosition?: "left" | "right";
}
export type BubbleType = React.ForwardRefExoticComponent<
@@ -26,7 +30,18 @@ export type BubbleType = React.ForwardRefExoticComponent<
>;
const Bubble: BubbleType = forwardRef(
({ children, className, name, timestamp, backgroundColor, ...rest }, ref) => {
(
{
children,
className,
name,
timestamp,
backgroundColor,
toptextPosition,
...rest
},
ref
) => {
return (
<div
ref={ref}
@@ -35,7 +50,12 @@ const Bubble: BubbleType = forwardRef(
{...rest}
>
{(timestamp || name) && (
<div className="navds-chat__top-text">
<div
className={cl(
`navds-chat__top-text`,
toptextPosition && `navds-chat__top-text--${toptextPosition}`
)}
>
{name && <Detail className="navds-chat__name">{name}</Detail>}
{timestamp && (
<Detail className="navds-chat__timestamp">{timestamp}</Detail>
+13 -1
View File
@@ -33,6 +33,11 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
* @default "left"
*/
position?: "left" | "right";
/**
* Hoizontal position of toptext
* @default Same as chat
*/
toptextPosition?: "left" | "right";
}
interface ChatComponent
@@ -53,6 +58,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
position = "left",
avatarBgColor,
backgroundColor,
toptextPosition,
...rest
},
ref
@@ -60,7 +66,13 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
return (
<div
ref={ref}
className={cl("navds-chat", className, `navds-chat--${position}`)}
className={cl(
"navds-chat",
className,
`navds-chat--${position} navds-chat--top-text-${
toptextPosition ?? position
}`
)}
{...rest}
>
<BodyShort
@@ -116,6 +116,57 @@ export const Position = () => {
);
};
export const ToptextPosition = () => {
return (
<div className="colgap">
<Chat
avatar="ON"
name="Ola Normann"
timestamp="01.01.21 14:00"
backgroundColor="rgba(255, 249, 240, 1)"
avatarBgColor="rgba(255, 236, 204, 1)"
toptextPosition="right"
>
<Chat.Bubble>
Adipisicing laborum est eu laborum est sit in commodo enim sint
laboris labore nisi ut.
</Chat.Bubble>
</Chat>
<Chat
avatar="KH"
name="Kari Høyli"
timestamp="01.01.21 14:32"
position="right"
backgroundColor="rgba(230, 240, 255, 1)"
avatarBgColor="rgba(204, 225, 255, 1)"
toptextPosition="left"
>
<Chat.Bubble>
Reprehenderit pariatur officia exercitation laboris.
</Chat.Bubble>
<Chat.Bubble>
Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit
est dolore incididunt. Occaecat cupidatat magna.
</Chat.Bubble>
</Chat>
<Chat
avatar="ON"
name="Ola Normann"
timestamp="01.01.21 15:00"
backgroundColor="rgba(255, 249, 240, 1)"
avatarBgColor="rgba(255, 236, 204, 1)"
>
<Chat.Bubble toptextPosition="right">
Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo
ea esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
labore sunt aute.
</Chat.Bubble>
</Chat>
</div>
);
};
export const Avatar = () => {
return (
<Chat avatar={<Illustration />} timestamp="01.01.21 14:00">
+2
View File
@@ -1,5 +1,7 @@
# @navikt/ds-tailwind
## 2.0.15
## 2.0.14
## 2.0.13
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-tailwind",
"version": "2.0.14",
"version": "2.0.15",
"description": "Tailwind config based on @navikt/ds-tokens",
"author": "Aksel | NAV designsystem team",
"keywords": [
@@ -22,7 +22,7 @@
"directory": "@navikt/core/tailwind"
},
"devDependencies": {
"@navikt/ds-tokens": "^2.0.14",
"@navikt/ds-tokens": "^2.0.15",
"@types/jest": "^29.0.0",
"color": "4.2.3",
"jest": "^29.0.0",
+2
View File
@@ -1,5 +1,7 @@
# @navikt/ds-tokens
## 2.0.15
## 2.0.14
## 2.0.13
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-tokens",
"version": "2.0.14",
"version": "2.0.15",
"description": "Design-tokens for NAV designsystem",
"author": "Aksel | NAV designsystem team",
"keywords": [
+2
View File
@@ -1,5 +1,7 @@
# @navikt/ds-icons
## 2.0.15
## 2.0.14
## 2.0.13
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-icons",
"version": "2.0.14",
"version": "2.0.15",
"description": "Aksel icons for NAV",
"author": "Aksel | NAV designsystem team",
"repository": {
+2
View File
@@ -1,5 +1,7 @@
# @navikt/ds-css-internal
## 2.0.15
## 2.0.14
## 2.0.13
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-css-internal",
"version": "2.0.14",
"version": "2.0.15",
"description": "CSS for NAV internal Designsystem-components",
"author": "Aksel | NAV designsystem team",
"keywords": [
+8
View File
@@ -1,5 +1,13 @@
# @navikt/ds-react-internal
## 2.0.15
### Patch Changes
- Updated dependencies [[`22dfd8e60`](https://github.com/navikt/Designsystemet/commit/22dfd8e60315c421749394d35e41f412a00a7593)]:
- @navikt/ds-react@2.0.15
- @navikt/ds-icons@2.0.15
## 2.0.14
### Patch Changes
+3 -3
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-react-internal",
"version": "2.0.14",
"version": "2.0.15",
"description": "Aksel react components for internal UIs in NAV",
"author": "Aksel | NAV designsystem team",
"license": "MIT",
@@ -35,8 +35,8 @@
"watch": "tsc --watch -p tsconfig.esm.json"
},
"dependencies": {
"@navikt/ds-icons": "^2.0.14",
"@navikt/ds-react": "^2.0.14",
"@navikt/ds-icons": "^2.0.15",
"@navikt/ds-react": "^2.0.15",
"clsx": "^1.1.1",
"copy-to-clipboard": "^3.3.1"
},
+8 -8
View File
@@ -15,14 +15,14 @@
"website"
],
"dependencies": {
"@navikt/ds-codemod": "^2.0.14",
"@navikt/ds-css": "^2.0.14",
"@navikt/ds-css-internal": "^2.0.14",
"@navikt/ds-icons": "^2.0.14",
"@navikt/ds-react": "^2.0.14",
"@navikt/ds-react-internal": "^2.0.14",
"@navikt/ds-tailwind": "^2.0.14",
"@navikt/ds-tokens": "^2.0.14"
"@navikt/ds-codemod": "^2.0.15",
"@navikt/ds-css": "^2.0.15",
"@navikt/ds-css-internal": "^2.0.15",
"@navikt/ds-icons": "^2.0.15",
"@navikt/ds-react": "^2.0.15",
"@navikt/ds-react-internal": "^2.0.15",
"@navikt/ds-tailwind": "^2.0.15",
"@navikt/ds-tokens": "^2.0.15"
},
"devDependencies": {
"prettier-plugin-tailwindcss": "^0.1.13"
@@ -0,0 +1,32 @@
import { Chat } from "@navikt/ds-react";
import { withDsExample } from "components/website-modules/examples/withDsExample";
const Example = () => {
return (
<div className="grid gap-10">
<Chat avatar="EVA" name="EVA" timestamp="01.01.21 14:00">
<Chat.Bubble>Hei! Mitt navn er Eva.</Chat.Bubble>
<Chat.Bubble>Hva kan jeg hjelpe deg med?</Chat.Bubble>
</Chat>
<Chat
avatar="NO"
name="Ola Normann"
timestamp="01.01.21 14:00"
position="right"
toptextPosition="left"
>
<Chat.Bubble>Hei Eva.</Chat.Bubble>
<Chat.Bubble>
Hvor sjekker jeg statusen på foreldrepengersøknaden min?
</Chat.Bubble>
</Chat>
</div>
);
};
export default withDsExample(Example);
export const args = {
index: 3,
desc: "Noen ganger ønsker man mer fleksibilitet for plassering av navn + tid i chatboblen.",
};
@@ -218,6 +218,8 @@ export const EditorPage = () => {
(query) => client.fetch(query)
);
console.log(data);
const {
data: fbData,
error: fbError,
@@ -264,7 +266,7 @@ export const EditorPage = () => {
{!fbError && !fbValidating && (
<div className="mt-7">
<Heading level="2" size="small" spacing>
Tilbakemeldinger på artikler du er forfatter i (
Tilbakemeldinger på artikler du er satt som forfatter (
{fbData?.length ?? 0})
</Heading>
{fbData?.length > 0 && (
@@ -277,11 +279,8 @@ export const EditorPage = () => {
)}
<div className="mt-7">
<Heading level="2" size="small" spacing>
Innhold du jobber med
Under arbeid / må re-valideres
</Heading>
<BodyShort spacing>
Dette er alle artikler du jobber med eller må godkjenne asap.
</BodyShort>
<Accordion>
<DraftList data={data} />
<OutDatedList data={data} />
@@ -16,15 +16,12 @@ const navn = [
"Blissbukk",
"Borneoorangutang",
"Damfrosk",
"Dvergsilkeape",
"Dåhjort",
"Edderkoppape",
"Elandantilope",
"Elg",
"Esel",
"Oter",
"Fjellrev",
"Flodsvin",
"Fugler",
"Gaupe",
"Gepard",
@@ -46,7 +43,6 @@ const navn = [
"Ringhalelemur",
"Rødpanda",
"Sau",
"Sjimpanse",
"Sjiraff",
"Stråleskilpadde",
"Slanger",
@@ -57,7 +53,6 @@ const navn = [
"Surikat",
"Tiger",
"Ulv",
"Fjordfe",
"Ekorn",
"Bever",
"Lemen",
@@ -67,7 +62,6 @@ const navn = [
"Småskogmus",
"Steinkobbe",
"Røyskatt",
"Moskusfe",
];
const adjektiv = [
@@ -81,13 +81,20 @@ export const Feedback = defineType({
url: "url",
feedback_type: "feedback_type",
artikkel_feedback: "artikkel_feedback",
title: "doc_ref.heading",
},
prepare(selection) {
const { melding, url, behandlet, feedback_type, artikkel_feedback } =
selection;
const {
melding,
url,
behandlet,
feedback_type,
artikkel_feedback,
title,
} = selection;
return {
title: melding ? melding : url ? url : "",
title: melding ? melding : title ? title : url ? url : "",
subtitle: `${behandlet ? "Ferdig behandlet" : "Ubehandlet"} | ${
feedback_type === "footer" ? "footer" : artikkel_feedback
}`,
+2 -2
View File
@@ -10,8 +10,8 @@
"preview": "vite preview"
},
"dependencies": {
"@navikt/ds-css": "2.0.14",
"@navikt/ds-react": "2.0.14",
"@navikt/ds-css": "2.0.15",
"@navikt/ds-react": "2.0.15",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
+25 -25
View File
@@ -3080,7 +3080,7 @@ __metadata:
languageName: node
linkType: hard
"@navikt/ds-codemod@^2.0.13, @navikt/ds-codemod@workspace:@navikt/codemod":
"@navikt/ds-codemod@^2.0.14, @navikt/ds-codemod@workspace:@navikt/codemod":
version: 0.0.0-use.local
resolution: "@navikt/ds-codemod@workspace:@navikt/codemod"
dependencies:
@@ -3107,7 +3107,7 @@ __metadata:
languageName: unknown
linkType: soft
"@navikt/ds-css-internal@^2.0.13, @navikt/ds-css-internal@workspace:@navikt/internal/css":
"@navikt/ds-css-internal@^2.0.14, @navikt/ds-css-internal@workspace:@navikt/internal/css":
version: 0.0.0-use.local
resolution: "@navikt/ds-css-internal@workspace:@navikt/internal/css"
dependencies:
@@ -3118,11 +3118,11 @@ __metadata:
languageName: unknown
linkType: soft
"@navikt/ds-css@2.0.13, @navikt/ds-css@^2.0.13, @navikt/ds-css@workspace:@navikt/core/css":
"@navikt/ds-css@2.0.14, @navikt/ds-css@^2.0.14, @navikt/ds-css@workspace:@navikt/core/css":
version: 0.0.0-use.local
resolution: "@navikt/ds-css@workspace:@navikt/core/css"
dependencies:
"@navikt/ds-tokens": ^2.0.13
"@navikt/ds-tokens": ^2.0.14
normalize.css: ^8.0.1
postcss: ^8.4.0
postcss-cli: ^9.0.0
@@ -3131,7 +3131,7 @@ __metadata:
languageName: unknown
linkType: soft
"@navikt/ds-icons@^2.0.13, @navikt/ds-icons@workspace:@navikt/icons":
"@navikt/ds-icons@^2.0.14, @navikt/ds-icons@workspace:@navikt/icons":
version: 0.0.0-use.local
resolution: "@navikt/ds-icons@workspace:@navikt/icons"
dependencies:
@@ -3167,8 +3167,8 @@ __metadata:
"@babel/preset-env": 7.19.4
"@babel/preset-react": 7.18.6
"@babel/preset-typescript": 7.18.6
"@navikt/ds-icons": ^2.0.13
"@navikt/ds-react": ^2.0.13
"@navikt/ds-icons": ^2.0.14
"@navikt/ds-react": ^2.0.14
"@rollup/plugin-babel": 6.0.2
"@rollup/plugin-commonjs": 23.0.2
"@rollup/plugin-node-resolve": ^15.0.1
@@ -3193,12 +3193,12 @@ __metadata:
languageName: unknown
linkType: soft
"@navikt/ds-react-internal@^2.0.13, @navikt/ds-react-internal@workspace:@navikt/internal/react":
"@navikt/ds-react-internal@^2.0.14, @navikt/ds-react-internal@workspace:@navikt/internal/react":
version: 0.0.0-use.local
resolution: "@navikt/ds-react-internal@workspace:@navikt/internal/react"
dependencies:
"@navikt/ds-icons": ^2.0.13
"@navikt/ds-react": ^2.0.13
"@navikt/ds-icons": ^2.0.14
"@navikt/ds-react": ^2.0.14
clsx: ^1.1.1
concurrently: 7.2.1
copy-to-clipboard: ^3.3.1
@@ -3214,12 +3214,12 @@ __metadata:
languageName: unknown
linkType: soft
"@navikt/ds-react@2.0.13, @navikt/ds-react@^2.0.13, @navikt/ds-react@workspace:@navikt/core/react":
"@navikt/ds-react@2.0.14, @navikt/ds-react@^2.0.14, @navikt/ds-react@workspace:@navikt/core/react":
version: 0.0.0-use.local
resolution: "@navikt/ds-react@workspace:@navikt/core/react"
dependencies:
"@floating-ui/react": 0.17.0
"@navikt/ds-icons": ^2.0.13
"@navikt/ds-icons": ^2.0.14
"@radix-ui/react-tabs": 1.0.0
"@radix-ui/react-toggle-group": 1.0.0
"@testing-library/dom": 8.13.0
@@ -3255,11 +3255,11 @@ __metadata:
languageName: unknown
linkType: soft
"@navikt/ds-tailwind@^2.0.13, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
"@navikt/ds-tailwind@^2.0.14, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
version: 0.0.0-use.local
resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
dependencies:
"@navikt/ds-tokens": ^2.0.13
"@navikt/ds-tokens": ^2.0.14
"@types/jest": ^29.0.0
color: 4.2.3
jest: ^29.0.0
@@ -3270,7 +3270,7 @@ __metadata:
languageName: unknown
linkType: soft
"@navikt/ds-tokens@^2.0.13, @navikt/ds-tokens@workspace:@navikt/core/tokens":
"@navikt/ds-tokens@^2.0.14, @navikt/ds-tokens@workspace:@navikt/core/tokens":
version: 0.0.0-use.local
resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
dependencies:
@@ -7763,14 +7763,14 @@ __metadata:
version: 0.0.0-use.local
resolution: "aksel.nav.no@workspace:aksel.nav.no"
dependencies:
"@navikt/ds-codemod": ^2.0.13
"@navikt/ds-css": ^2.0.13
"@navikt/ds-css-internal": ^2.0.13
"@navikt/ds-icons": ^2.0.13
"@navikt/ds-react": ^2.0.13
"@navikt/ds-react-internal": ^2.0.13
"@navikt/ds-tailwind": ^2.0.13
"@navikt/ds-tokens": ^2.0.13
"@navikt/ds-codemod": ^2.0.14
"@navikt/ds-css": ^2.0.14
"@navikt/ds-css-internal": ^2.0.14
"@navikt/ds-icons": ^2.0.14
"@navikt/ds-react": ^2.0.14
"@navikt/ds-react-internal": ^2.0.14
"@navikt/ds-tailwind": ^2.0.14
"@navikt/ds-tokens": ^2.0.14
prettier-plugin-tailwindcss: ^0.1.13
languageName: unknown
linkType: soft
@@ -23898,8 +23898,8 @@ __metadata:
version: 0.0.0-use.local
resolution: "shadow-dom@workspace:examples/shadow-dom"
dependencies:
"@navikt/ds-css": 2.0.13
"@navikt/ds-react": 2.0.13
"@navikt/ds-css": 2.0.14
"@navikt/ds-react": 2.0.14
"@types/react": ^18.0.0
"@types/react-dom": ^18.0.0
"@vitejs/plugin-react": ^2.1.0