From 0b765c34542726beab688dd56d0f28d37839a075 Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Tue, 11 Jun 2024 08:08:33 +0200 Subject: [PATCH 1/9] feat: implement ui on handy shortcuts --- .../Blocks/Shortcuts/shortcuts.module.css | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css index 01bf3318c..a40f4d0eb 100644 --- a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css +++ b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css @@ -6,4 +6,25 @@ .links { background-color: var(--Scandic-Brand-Warm-White); border-radius: var(--Corner-radius-xLarge); + display: grid; + border: 1px solid var(--Base-Border-Subtle, #e3d9d1); +} + +.link { + align-items: center; + border-bottom: 0.5px solid var(--Base-Border-Subtle, #e3d9d1); + color: var(--Theme-Primary-Light-On-Surface-Text); + display: flex; + font-family: var(--typography-Body-Regular-fontFamily); + font-size: var(--typography-Body-Regular-fontSize); + font-weight: 500; + justify-content: space-between; + line-height: 1.5rem; + padding: 1.5rem; + text-decoration: none; + letter-spacing: var(--typography-Body-Regular-letterSpacing); +} + +.link:last-child { + border-bottom: none; } From bb22f5b29275a219665ef84507ae0ec7df77c48f Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Tue, 11 Jun 2024 10:09:32 +0200 Subject: [PATCH 2/9] feat: remove default values --- components/MyPages/Blocks/Shortcuts/shortcuts.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css index a40f4d0eb..b29c4ddc3 100644 --- a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css +++ b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css @@ -7,12 +7,12 @@ background-color: var(--Scandic-Brand-Warm-White); border-radius: var(--Corner-radius-xLarge); display: grid; - border: 1px solid var(--Base-Border-Subtle, #e3d9d1); + border: 1px solid var(--Base-Border-Subtle); } .link { align-items: center; - border-bottom: 0.5px solid var(--Base-Border-Subtle, #e3d9d1); + border-bottom: 0.5px solid var(--Base-Border-Subtle); color: var(--Theme-Primary-Light-On-Surface-Text); display: flex; font-family: var(--typography-Body-Regular-fontFamily); From df22c3990926205ef8e5a2711a92718f9303e9a0 Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Tue, 11 Jun 2024 15:07:07 +0200 Subject: [PATCH 3/9] feat: implement logic for icons --- components/Icons/Calendar.tsx | 2 +- components/Icons/CheckCircle.tsx | 2 +- components/Icons/ChevronDown.tsx | 2 +- components/Icons/Email.tsx | 2 +- components/Icons/House.tsx | 2 +- components/Icons/Phone.tsx | 2 +- components/Icons/icon.module.css | 5 ----- components/MyPages/Blocks/Shortcuts/index.tsx | 2 +- components/MyPages/Blocks/Shortcuts/shortcuts.module.css | 5 +++++ types/components/deprecatedIconProps.ts | 4 ++++ 10 files changed, 16 insertions(+), 12 deletions(-) create mode 100644 types/components/deprecatedIconProps.ts diff --git a/components/Icons/Calendar.tsx b/components/Icons/Calendar.tsx index eaa8f42ac..5d28a3c28 100644 --- a/components/Icons/Calendar.tsx +++ b/components/Icons/Calendar.tsx @@ -1,6 +1,6 @@ import { iconVariants } from "./variants" -import type { IconProps } from "@/types/components/icon" +import { IconProps } from "@/types/components/icon" export default function CalendarIcon({ className, diff --git a/components/Icons/CheckCircle.tsx b/components/Icons/CheckCircle.tsx index f8278019b..7109df68e 100644 --- a/components/Icons/CheckCircle.tsx +++ b/components/Icons/CheckCircle.tsx @@ -1,6 +1,6 @@ import { iconVariants } from "./variants" -import type { IconProps } from "@/types/components/icon" +import { IconProps } from "@/types/components/icon" export default function CheckCircleIcon({ className, diff --git a/components/Icons/ChevronDown.tsx b/components/Icons/ChevronDown.tsx index b9ce5544e..f50b5ce3a 100644 --- a/components/Icons/ChevronDown.tsx +++ b/components/Icons/ChevronDown.tsx @@ -1,6 +1,6 @@ import { iconVariants } from "./variants" -import type { IconProps } from "@/types/components/icon" +import { IconProps } from "@/types/components/icon" export default function ChevronDownIcon({ className, diff --git a/components/Icons/Email.tsx b/components/Icons/Email.tsx index e72efd751..0b39feb78 100644 --- a/components/Icons/Email.tsx +++ b/components/Icons/Email.tsx @@ -1,6 +1,6 @@ import { iconVariants } from "./variants" -import type { IconProps } from "@/types/components/icon" +import { IconProps } from "@/types/components/icon" export default function EmailIcon({ className, color, ...props }: IconProps) { const classNames = iconVariants({ className, color }) diff --git a/components/Icons/House.tsx b/components/Icons/House.tsx index 1ddcf0f74..b13240805 100644 --- a/components/Icons/House.tsx +++ b/components/Icons/House.tsx @@ -1,6 +1,6 @@ import { iconVariants } from "./variants" -import type { IconProps } from "@/types/components/icon" +import { IconProps } from "@/types/components/icon" export default function HouseIcon({ className, color, ...props }: IconProps) { const classNames = iconVariants({ className, color }) diff --git a/components/Icons/Phone.tsx b/components/Icons/Phone.tsx index cb00f3d09..65da39040 100644 --- a/components/Icons/Phone.tsx +++ b/components/Icons/Phone.tsx @@ -1,6 +1,6 @@ import { iconVariants } from "./variants" -import type { IconProps } from "@/types/components/icon" +import { IconProps } from "@/types/components/icon" export default function PhoneIcon({ className, color, ...props }: IconProps) { const classNames = iconVariants({ className, color }) diff --git a/components/Icons/icon.module.css b/components/Icons/icon.module.css index 2f76d1778..59a0cc283 100644 --- a/components/Icons/icon.module.css +++ b/components/Icons/icon.module.css @@ -2,27 +2,22 @@ height: 20px; width: 20px; } - .black, .black * { fill: #000; } - .burgundy, .burgundy * { fill: var(--Scandic-Brand-Burgundy); } - .pale, .pale * { fill: var(--Scandic-Brand-Pale-Peach); } - .peach80, .peach80 * { fill: var(--Scandic-Peach-80); } - .plosa, .plosa * { fill: var(--Theme-Primary-Light-On-Surface-Accent); diff --git a/components/MyPages/Blocks/Shortcuts/index.tsx b/components/MyPages/Blocks/Shortcuts/index.tsx index de3902348..0fd4374c8 100644 --- a/components/MyPages/Blocks/Shortcuts/index.tsx +++ b/components/MyPages/Blocks/Shortcuts/index.tsx @@ -30,7 +30,7 @@ export default function Shortcuts({ variant="shortcut" > {shortcut.text ? shortcut.text : shortcut.title} - + ))} diff --git a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css index b29c4ddc3..dff00065f 100644 --- a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css +++ b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css @@ -28,3 +28,8 @@ .link:last-child { border-bottom: none; } + +.arrowRight { + height: 24px; + width: 24px; +} diff --git a/types/components/deprecatedIconProps.ts b/types/components/deprecatedIconProps.ts new file mode 100644 index 000000000..21b31a303 --- /dev/null +++ b/types/components/deprecatedIconProps.ts @@ -0,0 +1,4 @@ +export type DeprecatedIconProps = { + height?: number + width?: number +} From 4dc945a32474693e27a73bcf3cced2d1fb6eae4a Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Tue, 11 Jun 2024 16:21:07 +0200 Subject: [PATCH 4/9] feat: use body wrapper --- components/MyPages/Blocks/Shortcuts/index.tsx | 5 ++++- components/MyPages/Blocks/Shortcuts/shortcuts.module.css | 7 ------- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/components/MyPages/Blocks/Shortcuts/index.tsx b/components/MyPages/Blocks/Shortcuts/index.tsx index 0fd4374c8..fa7535b93 100644 --- a/components/MyPages/Blocks/Shortcuts/index.tsx +++ b/components/MyPages/Blocks/Shortcuts/index.tsx @@ -1,5 +1,6 @@ import { ArrowRightIcon } from "@/components/Icons" import Link from "@/components/TempDesignSystem/Link" +import Body from "@/components/TempDesignSystem/Text/Body" import Header from "../Header" @@ -29,7 +30,9 @@ export default function Shortcuts({ target={shortcut.openInNewTab ? "_blank" : undefined} variant="shortcut" > - {shortcut.text ? shortcut.text : shortcut.title} + + {shortcut.text ? shortcut.text : shortcut.title} + ))} diff --git a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css index dff00065f..821eb9984 100644 --- a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css +++ b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css @@ -13,16 +13,9 @@ .link { align-items: center; border-bottom: 0.5px solid var(--Base-Border-Subtle); - color: var(--Theme-Primary-Light-On-Surface-Text); display: flex; - font-family: var(--typography-Body-Regular-fontFamily); - font-size: var(--typography-Body-Regular-fontSize); - font-weight: 500; justify-content: space-between; - line-height: 1.5rem; padding: 1.5rem; - text-decoration: none; - letter-spacing: var(--typography-Body-Regular-letterSpacing); } .link:last-child { From 680e9ec209ecff51da1b1981741eaf528cbecadd Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Thu, 13 Jun 2024 13:02:24 +0200 Subject: [PATCH 5/9] feat: change import --- components/Icons/Calendar.tsx | 2 +- components/Icons/CheckCircle.tsx | 2 +- components/Icons/ChevronDown.tsx | 2 +- components/Icons/Email.tsx | 2 +- components/Icons/House.tsx | 2 +- components/Icons/icon.module.css | 5 +++++ 6 files changed, 10 insertions(+), 5 deletions(-) diff --git a/components/Icons/Calendar.tsx b/components/Icons/Calendar.tsx index 5d28a3c28..eaa8f42ac 100644 --- a/components/Icons/Calendar.tsx +++ b/components/Icons/Calendar.tsx @@ -1,6 +1,6 @@ import { iconVariants } from "./variants" -import { IconProps } from "@/types/components/icon" +import type { IconProps } from "@/types/components/icon" export default function CalendarIcon({ className, diff --git a/components/Icons/CheckCircle.tsx b/components/Icons/CheckCircle.tsx index 7109df68e..f8278019b 100644 --- a/components/Icons/CheckCircle.tsx +++ b/components/Icons/CheckCircle.tsx @@ -1,6 +1,6 @@ import { iconVariants } from "./variants" -import { IconProps } from "@/types/components/icon" +import type { IconProps } from "@/types/components/icon" export default function CheckCircleIcon({ className, diff --git a/components/Icons/ChevronDown.tsx b/components/Icons/ChevronDown.tsx index f50b5ce3a..b9ce5544e 100644 --- a/components/Icons/ChevronDown.tsx +++ b/components/Icons/ChevronDown.tsx @@ -1,6 +1,6 @@ import { iconVariants } from "./variants" -import { IconProps } from "@/types/components/icon" +import type { IconProps } from "@/types/components/icon" export default function ChevronDownIcon({ className, diff --git a/components/Icons/Email.tsx b/components/Icons/Email.tsx index 0b39feb78..e72efd751 100644 --- a/components/Icons/Email.tsx +++ b/components/Icons/Email.tsx @@ -1,6 +1,6 @@ import { iconVariants } from "./variants" -import { IconProps } from "@/types/components/icon" +import type { IconProps } from "@/types/components/icon" export default function EmailIcon({ className, color, ...props }: IconProps) { const classNames = iconVariants({ className, color }) diff --git a/components/Icons/House.tsx b/components/Icons/House.tsx index b13240805..1ddcf0f74 100644 --- a/components/Icons/House.tsx +++ b/components/Icons/House.tsx @@ -1,6 +1,6 @@ import { iconVariants } from "./variants" -import { IconProps } from "@/types/components/icon" +import type { IconProps } from "@/types/components/icon" export default function HouseIcon({ className, color, ...props }: IconProps) { const classNames = iconVariants({ className, color }) diff --git a/components/Icons/icon.module.css b/components/Icons/icon.module.css index 59a0cc283..2f76d1778 100644 --- a/components/Icons/icon.module.css +++ b/components/Icons/icon.module.css @@ -2,22 +2,27 @@ height: 20px; width: 20px; } + .black, .black * { fill: #000; } + .burgundy, .burgundy * { fill: var(--Scandic-Brand-Burgundy); } + .pale, .pale * { fill: var(--Scandic-Brand-Pale-Peach); } + .peach80, .peach80 * { fill: var(--Scandic-Peach-80); } + .plosa, .plosa * { fill: var(--Theme-Primary-Light-On-Surface-Accent); From bb64f8ab7ac4a9af60973b1ef0f3042096edc610 Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Thu, 13 Jun 2024 13:09:03 +0200 Subject: [PATCH 6/9] feat: syntax change --- components/Icons/Phone.tsx | 2 +- components/MyPages/Blocks/Shortcuts/shortcuts.module.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Icons/Phone.tsx b/components/Icons/Phone.tsx index 65da39040..cb00f3d09 100644 --- a/components/Icons/Phone.tsx +++ b/components/Icons/Phone.tsx @@ -1,6 +1,6 @@ import { iconVariants } from "./variants" -import { IconProps } from "@/types/components/icon" +import type { IconProps } from "@/types/components/icon" export default function PhoneIcon({ className, color, ...props }: IconProps) { const classNames = iconVariants({ className, color }) diff --git a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css index 821eb9984..41d73280f 100644 --- a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css +++ b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css @@ -4,9 +4,9 @@ } .links { + display: grid; background-color: var(--Scandic-Brand-Warm-White); border-radius: var(--Corner-radius-xLarge); - display: grid; border: 1px solid var(--Base-Border-Subtle); } From ca2b011f9682f2d047aff73ea9cd191435f510ef Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Thu, 13 Jun 2024 14:53:24 +0200 Subject: [PATCH 7/9] feat: remove deprecatedIconProps --- types/components/deprecatedIconProps.ts | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 types/components/deprecatedIconProps.ts diff --git a/types/components/deprecatedIconProps.ts b/types/components/deprecatedIconProps.ts deleted file mode 100644 index 21b31a303..000000000 --- a/types/components/deprecatedIconProps.ts +++ /dev/null @@ -1,4 +0,0 @@ -export type DeprecatedIconProps = { - height?: number - width?: number -} From d6a5980a9bd83ebb2a5c8849c88c324a415ac169 Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Thu, 13 Jun 2024 15:14:07 +0200 Subject: [PATCH 8/9] feat: change border radius --- components/MyPages/Blocks/Shortcuts/shortcuts.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css index 41d73280f..62ffd1591 100644 --- a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css +++ b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css @@ -6,7 +6,7 @@ .links { display: grid; background-color: var(--Scandic-Brand-Warm-White); - border-radius: var(--Corner-radius-xLarge); + border-radius: var(--Corner-radius-Medium); border: 1px solid var(--Base-Border-Subtle); } From 9ecfa968760936fae01d3979da74aef070c90add Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Thu, 13 Jun 2024 17:00:57 +0200 Subject: [PATCH 9/9] feat: remove link class --- .../MyPages/Blocks/Shortcuts/shortcuts.module.css | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css index 62ffd1591..bfa66ca53 100644 --- a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css +++ b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css @@ -10,18 +10,6 @@ border: 1px solid var(--Base-Border-Subtle); } -.link { - align-items: center; - border-bottom: 0.5px solid var(--Base-Border-Subtle); - display: flex; - justify-content: space-between; - padding: 1.5rem; -} - -.link:last-child { - border-bottom: none; -} - .arrowRight { height: 24px; width: 24px;