Skip to content

Commit 23202f6

Browse files
TheFossilDevAugustinMauroycanerakdasovflowd
authored
feat: ChangelogModal Component (#6126)
Co-authored-by: Augustin Mauroy <augustin.mauroy@outlook.fr> Co-authored-by: Caner Akdas <canerakdas@gmail.com> Co-authored-by: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Co-authored-by: Claudio W <cwunder@gnome.org> Co-authored-by: Claudio Wunder <cwunder@hubspot.com>
1 parent 84e95c3 commit 23202f6

27 files changed

Lines changed: 573 additions & 37 deletions

File tree

‎.storybook/main.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
1+
import classNames from 'classnames';
12
import type { StorybookConfig } from '@storybook/nextjs';
23

4+
const rootClasses = classNames(
5+
// note: this is hard-coded sadly as next/font can only be loaded within next.js context
6+
'__variable_open-sans-normal',
7+
// note: this is hard-coded sadly as next/font can only be loaded within next.js context
8+
'__variable_ibm-plex-mono-normal-600',
9+
'font-open-sans',
10+
'bg-white',
11+
'text-neutral-950',
12+
'dark:bg-neutral-950',
13+
'dark:text-white'
14+
);
15+
316
const config: StorybookConfig = {
417
stories: ['../components/**/*.stories.tsx'],
518
addons: [
@@ -16,7 +29,7 @@ const config: StorybookConfig = {
1629
// on Storybook we don't use `next-theme` as we want to simulate themes
1730
'<style>:root { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; }</style>' +
1831
// This adds the base styling for dark/light themes within Storybook. This is a Storybook-only style
19-
'<body class="bg-white text-neutral-950 dark:bg-neutral-950 dark:text-white"></body>',
32+
`<body class="${rootClasses}"></body>`,
2033
core: { disableTelemetry: true, disableWhatsNewNotifications: true },
2134
framework: { name: '@storybook/nextjs', options: {} },
2235
webpack: async config => ({ ...config, performance: { hints: false } }),

‎.storybook/preview.tsx‎

Lines changed: 3 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,30 @@
1-
import classNames from 'classnames';
21
import { NextIntlClientProvider } from 'next-intl';
32

43
import { withThemeByDataAttribute } from '@storybook/addon-themes';
54
import { NotificationProvider } from '@/providers/notificationProvider';
6-
import {
7-
OPEN_SANS_FONT,
8-
IBM_PLEX_MONO_FONT,
9-
STORYBOOK_MODES,
10-
STORYBOOK_SIZES,
11-
} from '@/.storybook/constants';
5+
import { STORYBOOK_MODES, STORYBOOK_SIZES } from '@/.storybook/constants';
126
import type { Preview, ReactRenderer } from '@storybook/react';
137

148
import englishLocale from '@/i18n/locales/en.json';
159

1610
import '../styles/new/index.css';
1711

18-
const rootClasses = classNames(
19-
OPEN_SANS_FONT.variable,
20-
IBM_PLEX_MONO_FONT.variable,
21-
'font-open-sans'
22-
);
23-
2412
const preview: Preview = {
2513
parameters: {
2614
nextjs: { router: { basePath: '' }, appDirectory: true },
2715
chromatic: { modes: STORYBOOK_MODES },
2816
viewport: { defaultViewport: 'large', viewports: STORYBOOK_SIZES },
2917
},
30-
// These are extra Storybook Decorators applied to all stories
31-
// that introduce extra functionality such as Theme Switching
32-
// and all the App's Providers (Site, Theme, Locale)
3318
decorators: [
3419
Story => (
3520
<NextIntlClientProvider locale="en" messages={englishLocale}>
3621
<NotificationProvider viewportClassName="absolute top-0 left-0 list-none">
37-
<div className={rootClasses}>
38-
<Story />
39-
</div>
22+
<Story />
4023
</NotificationProvider>
4124
</NextIntlClientProvider>
4225
),
4326
withThemeByDataAttribute<ReactRenderer>({
44-
themes: {
45-
light: '',
46-
dark: 'dark',
47-
},
27+
themes: { light: '', dark: 'dark' },
4828
defaultTheme: 'light',
4929
attributeName: 'data-theme',
5030
}),

‎components/Common/AvatarGroup/index.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,14 @@ import styles from './index.module.css';
1111
type AvatarGroupProps = {
1212
avatars: ComponentProps<typeof Avatar>[];
1313
limit?: number;
14+
isExpandable?: boolean;
1415
};
1516

16-
const AvatarGroup: FC<AvatarGroupProps> = ({ avatars, limit = 10 }) => {
17+
const AvatarGroup: FC<AvatarGroupProps> = ({
18+
avatars,
19+
limit = 10,
20+
isExpandable = true,
21+
}) => {
1722
const [showMore, setShowMore] = useState(false);
1823

1924
const renderAvatars = useMemo(
@@ -33,7 +38,7 @@ const AvatarGroup: FC<AvatarGroupProps> = ({ avatars, limit = 10 }) => {
3338

3439
{avatars.length > limit && (
3540
<span
36-
onClick={() => setShowMore(!showMore)}
41+
onClick={isExpandable ? () => setShowMore(prev => !prev) : undefined}
3742
className={classNames(avatarstyles.avatarRoot, 'cursor-pointer')}
3843
>
3944
<span className={avatarstyles.avatar}>

‎components/Downloads/ChangelogModal/index.module.css‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
.overlay {
2+
@apply fixed
3+
inset-0
4+
flex
5+
justify-center
6+
bg-white
7+
bg-opacity-90
8+
backdrop-blur-lg
9+
dark:bg-neutral-950
10+
dark:bg-opacity-80;
11+
12+
.content {
13+
@apply relative
14+
mx-4
15+
my-4
16+
inline-flex
17+
w-full
18+
flex-col
19+
overflow-scroll
20+
rounded
21+
border
22+
border-neutral-200
23+
bg-white
24+
p-8
25+
focus:outline-none
26+
dark:bg-neutral-950
27+
sm:mt-20
28+
sm:p-12
29+
lg:w-2/3
30+
xl:w-1/2;
31+
}
32+
33+
.close {
34+
@apply absolute
35+
right-3
36+
top-3
37+
block
38+
h-6
39+
w-6
40+
cursor-pointer
41+
sm:hidden;
42+
}
43+
44+
.title {
45+
@apply mb-2
46+
text-3xl
47+
font-semibold
48+
text-neutral-900
49+
dark:text-white;
50+
}
51+
52+
.description {
53+
@apply mb-4
54+
text-lg
55+
font-regular
56+
text-neutral-800
57+
dark:text-neutral-200;
58+
}
59+
60+
.authors {
61+
@apply mb-8
62+
flex
63+
flex-wrap
64+
items-center
65+
gap-4;
66+
67+
a {
68+
@apply flex
69+
items-center
70+
gap-1
71+
text-xs
72+
text-neutral-600
73+
underline
74+
visited:text-neutral-600;
75+
}
76+
77+
svg {
78+
@apply h-3
79+
w-3
80+
text-neutral-600;
81+
}
82+
}
83+
84+
.wrapper {
85+
@apply flex
86+
flex-col
87+
gap-4;
88+
89+
h1,
90+
h2,
91+
h3,
92+
h4,
93+
h5,
94+
p,
95+
a {
96+
@apply text-neutral-900
97+
dark:text-white;
98+
}
99+
100+
a {
101+
@apply underline;
102+
}
103+
104+
pre {
105+
@apply overflow-auto;
106+
}
107+
}
108+
}

0 commit comments

Comments
 (0)