Skip to content

Commit 456a9f3

Browse files
marcus-wishesmarcus-wishes
committed
removed page body header, added box shadow classes
1 parent cd80eaf commit 456a9f3

File tree

6 files changed

+73
-61
lines changed

6 files changed

+73
-61
lines changed

‎library/src/layouting/PageLayout.tsx‎

Lines changed: 28 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
import React from "react"
2-
import { token } from "@atlaskit/tokens"
32
import { twMerge } from "tailwind-merge"
43

5-
const pageContentBackgroundColor = token("elevation.surface", "#fff")
6-
const subtitleColor = token("color.text.subtlest", "#172B4D")
7-
const borderColor = token("color.border", "#091e4224")
8-
const menuColor = token("color.background.neutral.subtle", "#f7f8f9")
9-
104
const Page = ({
115
children,
126
id,
@@ -31,21 +25,20 @@ const PageHeader = ({
3125
children,
3226
id,
3327
className,
28+
style,
3429
}: {
3530
children: React.ReactNode
3631
id?: string
3732
className?: string
33+
style?: React.CSSProperties
3834
}) => (
3935
<div
4036
className={twMerge(
41-
"flex w-full flex-col border-b pl-5 pr-3 pt-5",
37+
"border-border bg-neutral-subtle z-0 flex w-full flex-col border-b pl-5 pr-3 pt-5 shadow-md",
4238
className,
4339
)}
4440
id={id}
45-
style={{
46-
borderColor,
47-
backgroundColor: menuColor,
48-
}}
41+
style={style}
4942
>
5043
{children}
5144
</div>
@@ -55,12 +48,14 @@ const PageHeaderTitle = ({
5548
children,
5649
id,
5750
className,
51+
style,
5852
}: {
5953
children: React.ReactNode
6054
id?: string
6155
className?: string
56+
style?: React.CSSProperties
6257
}) => (
63-
<div className={twMerge("mb-2", className)} id={id}>
58+
<div className={twMerge("mb-2", className)} id={id} style={style}>
6459
{children}
6560
</div>
6661
)
@@ -69,15 +64,17 @@ const PageHeaderSubTitle = ({
6964
children,
7065
id,
7166
className,
67+
style,
7268
}: {
7369
children: React.ReactNode
7470
id?: string
7571
className?: string
72+
style?: React.CSSProperties
7673
}) => (
7774
<div
78-
className={twMerge("mb-3 mt-3", className)}
75+
className={twMerge("text-text-subtlest mb-3 mt-3", className)}
7976
id={id}
80-
style={{ color: subtitleColor }}
77+
style={style}
8178
>
8279
{children}
8380
</div>
@@ -87,13 +84,16 @@ const PageHeaderLine = ({
8784
children,
8885
id,
8986
className,
87+
style,
9088
}: {
9189
children: React.ReactNode
9290
id?: string
9391
className?: string
92+
style?: React.CSSProperties
9493
}) => (
9594
<div
9695
className={twMerge("mb-2 flex w-full items-center gap-1", className)}
96+
style={style}
9797
id={id}
9898
>
9999
{children}
@@ -104,61 +104,43 @@ const PageBody = ({
104104
children,
105105
id,
106106
className,
107+
style,
107108
}: {
108109
children: React.ReactNode
109110
id?: string
110111
className?: string
112+
style?: React.CSSProperties
111113
}) => (
112114
<div
113115
className={twMerge(
114116
"flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
115117
className,
116118
)}
119+
style={style}
117120
id={id}
118121
>
119122
{children}
120123
</div>
121124
)
122125

123-
const PageBodyHeader = ({
124-
children,
125-
id,
126-
className,
127-
}: {
128-
children: React.ReactNode
129-
id?: string
130-
className?: string
131-
}) => (
132-
<div
133-
className={twMerge("z-0 pb-2 pl-4 pr-3 pt-3", className)}
134-
id={id}
135-
style={{
136-
boxShadow: `0 4px 4px ${token("color.border", "#091e4224")}`,
137-
backgroundColor: menuColor,
138-
}}
139-
>
140-
{children}
141-
</div>
142-
)
143-
144126
const PageBodyContent = ({
145127
children,
146128
id,
147129
className,
130+
style,
148131
}: {
149132
children: React.ReactNode
150133
id?: string
151134
className?: string
135+
style?: React.CSSProperties
152136
}) => (
153137
<div
154138
className={twMerge(
155-
"min-h-0 flex-1 overflow-y-auto pb-5 pl-5 pr-3 pt-3",
139+
"bg-surface min-h-0 flex-1 overflow-y-auto pb-5 pl-5 pr-3 pt-3",
156140
className,
157141
)}
158142
id={id}
159-
style={{
160-
backgroundColor: pageContentBackgroundColor,
161-
}}
143+
style={style}
162144
>
163145
{children}
164146
</div>
@@ -168,19 +150,20 @@ const PageBodyFooter = ({
168150
children,
169151
id,
170152
className,
153+
style,
171154
}: {
172155
children: React.ReactNode
173156
id?: string
174157
className?: string
158+
style?: React.CSSProperties
175159
}) => (
176160
<div
177-
className={twMerge("flex justify-center border-t pt-1", className)}
161+
className={twMerge(
162+
"bg-neutral-subtle border-border shadow-md-up flex justify-center border-t pt-1",
163+
className,
164+
)}
178165
id={id}
179-
style={{
180-
borderColor,
181-
boxShadow: `0 -4px 4px ${token("color.border", "#091e4224")}`,
182-
backgroundColor: menuColor,
183-
}}
166+
style={style}
184167
>
185168
{children}
186169
</div>
@@ -192,7 +175,6 @@ const PageLayout = {
192175
PageHeaderTitle,
193176
PageHeaderSubTitle,
194177
PageBody,
195-
PageBodyHeader,
196178
PageBodyContent,
197179
PageBodyFooter,
198180
PageHeaderLine,

‎package-lock.json‎

Lines changed: 21 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
"react-intl": "^6.5.1",
7070
"react-joyride": "^2.6.2",
7171
"react-router-dom": "^6.17.0",
72+
"react-toastify": "^9.1.3",
7273
"react-tooltip": "^5.21.6",
7374
"use-resize-observer": "^9.1.0"
7475
},

‎showcase/public/showcase-sources.txt‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3401,9 +3401,6 @@ function PageLayoutExample() {
34013401
</PageLayout.PageHeaderLine>
34023402
</PageLayout.PageHeader>
34033403
<PageLayout.PageBody>
3404-
<PageLayout.PageBodyHeader>
3405-
Page Body Header
3406-
</PageLayout.PageBodyHeader>
34073404
<PageLayout.PageBodyContent>
34083405
<div>TEST</div>
34093406
{Array(100)
@@ -3959,18 +3956,17 @@ import ShowcaseWrapperItem, {
39593956

39603957
import {
39613958
Button,
3959+
ToastFlagContainer,
39623960
showErrorFlag,
39633961
showFlag,
39643962
showFlagExtended,
39653963
showInformationFlag,
39663964
showSuccessFlag,
39673965
showWarningFlag,
39683966
} from "@linked-planet/ui-kit-ts"
3969-
import { ToastContainer } from "react-toastify"
39703967

39713968
//#region toastflagShowExtendedFlag
3972-
//import { ToastContainer } from "react-toastify"
3973-
// add the ToastContainer to your app
3969+
// add the ToastFlagContainer to the root of your app
39743970
function ExampleShowExtendedFlag() {
39753971
return (
39763972
<div className="flex flex-col gap-3">
@@ -4078,13 +4074,13 @@ function ExampleShowExtendedFlag() {
40784074
>
40794075
Warning
40804076
</Button>
4081-
<ToastContainer />
4077+
<ToastFlagContainer />
40824078
</div>
40834079
)
40844080
}
40854081
//#endregion toastflagShowExtendedFlag
40864082

4087-
//#region toastflagShowEFlag
4083+
//#region toastflagShowFlag
40884084
function ExampleShowFlags() {
40894085
return (
40904086
<div className="flex flex-col gap-3">
@@ -4165,7 +4161,7 @@ function ExampleShowFlags() {
41654161
>
41664162
Warning
41674163
</Button>
4168-
<ToastContainer />
4164+
<ToastFlagContainer />
41694165
</div>
41704166
)
41714167
}

‎showcase/src/components/showcase/wrapper/PageLayoutShowcase.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,6 @@ function PageLayoutExample() {
2727
</PageLayout.PageHeaderLine>
2828
</PageLayout.PageHeader>
2929
<PageLayout.PageBody>
30-
<PageLayout.PageBodyHeader>
31-
Page Body Header
32-
</PageLayout.PageBodyHeader>
3330
<PageLayout.PageBodyContent>
3431
<div>TEST</div>
3532
{Array(100)

‎tailwind.config.lib.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,10 @@ import {
3838
N90A,
3939
N70A,
4040
N500A,
41-
Y200,
4241
B200,
4342
B100,
4443
G200,
4544
R200,
46-
R300,
4745
} from "@atlaskit/theme/colors"
4846
import colors from "tailwindcss/colors"
4947

@@ -216,7 +214,24 @@ export const theme = {
216214
pressed: `var(--ds-interaction-pressed, ${N90A})`,
217215
},
218216
},
219-
//},
217+
boxShadow: {
218+
"2xl": "0 25px 50px -12px var(--ds-border, rgb(0 0 0 / 0.25))",
219+
xl: "0 20px 25px -5px var(--ds-border, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--ds-border, rgb(0 0 0 / 0.1))",
220+
lg: "0 10px 15px -3px var(--ds-border, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--ds-border, rgb(0 0 0 / 0.1))",
221+
md: "0 4px 6px -1px var(--ds-border, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--ds-border, rgb(0 0 0 / 0.1))",
222+
DEFAULT:
223+
"0 1px 3px 0 var(--ds-border, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--ds-border, rgb(0 0 0 / 0.1))",
224+
sm: "0 1px 2px 0 var(--ds-border, rgb(0 0 0 / 0.05)",
225+
"2xl-up": "0 -25px 50px 12px var(--ds-border, rgb(0 0 0 / 0.25))",
226+
"xl-up":
227+
"0 -20px 25px -5px var(--ds-border, rgb(0 0 0 / 0.1)), 0 -8px 10px -6px var(--ds-border, rgb(0 0 0 / 0.1))",
228+
"lg-up":
229+
"0 -10px 15px -3px var(--ds-border, rgb(0 0 0 / 0.1)), 0 -4px 6px -4px var(--ds-border, rgb(0 0 0 / 0.1))",
230+
"md-up":
231+
"0 -4px 6px -1px var(--ds-border, rgb(0 0 0 / 0.1)), 0 -2px 4px -2px var(--ds-border, rgb(0 0 0 / 0.1))",
232+
up: "0 -1px 3px 0 var(--ds-border, rgb(0 0 0 / 0.1)), 0 -1px 2px -1px var(--ds-border, rgb(0 0 0 / 0.1))",
233+
"sm-up": "0 -1px 2px 0 var(--ds-border, rgb(0 0 0 / 0.05)",
234+
},
220235
}
221236

222237
export default {

0 commit comments

Comments
 (0)