@opengeoweb/theme 10.0.0 → 10.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -2
- package/index.esm.js +52 -8
- package/package.json +1 -1
- package/src/lib/components/Storybook/index.d.ts +1 -0
- package/src/lib/stories/Accordion.stories.d.ts +5 -11
- package/src/lib/stories/Avatar.stories.d.ts +5 -23
- package/src/lib/stories/Backdrop.stories.d.ts +5 -10
- package/src/lib/stories/Breakpoints.stories.d.ts +4 -10
- package/src/lib/stories/Button.stories.d.ts +5 -23
- package/src/lib/stories/Card.stories.d.ts +5 -23
- package/src/lib/stories/Colors.stories.d.ts +5 -25
- package/src/lib/stories/Elevation.stories.d.ts +5 -26
- package/src/lib/stories/FormElements.stories.d.ts +5 -23
- package/src/lib/stories/IconButton.stories.d.ts +5 -23
- package/src/lib/stories/Icons.stories.d.ts +5 -10
- package/src/lib/stories/List.stories.d.ts +5 -23
- package/src/lib/stories/MenuItem.stories.d.ts +5 -23
- package/src/lib/stories/Select.stories.d.ts +5 -23
- package/src/lib/stories/Slider.stories.d.ts +5 -23
- package/src/lib/stories/Snackbar.stories.d.ts +5 -23
- package/src/lib/stories/Switch.stories.d.ts +5 -23
- package/src/lib/stories/Table.stories.d.ts +5 -25
- package/src/lib/stories/Tabs.stories.d.ts +5 -23
- package/src/lib/stories/TextField.stories.d.ts +5 -23
- package/src/lib/stories/ToggleButton.stories.d.ts +5 -23
- package/src/lib/stories/Tooltip.stories.d.ts +5 -23
- package/src/lib/stories/Typography.stories.d.ts +5 -23
- package/src/lib/types.d.ts +6 -0
- package/src/lib/stories/StoryWrapper.d.ts +0 -7
- /package/src/lib/{stories → components/Storybook}/StoryHeader.d.ts +0 -0
package/README.md
CHANGED
|
@@ -226,7 +226,6 @@ export const TableDark = (): React.ReactElement => (
|
|
|
226
226
|
// lib/components/Theme/ThemeContext.tsx
|
|
227
227
|
|
|
228
228
|
// lib/stories
|
|
229
|
-
// lib/stories/StoryWrapper.tsx
|
|
230
229
|
// lib/stories/story.stories.tsx
|
|
231
230
|
```
|
|
232
231
|
|
|
@@ -319,7 +318,7 @@ If there are mistakes in naming, colors are missing in the Design, contact [Didi
|
|
|
319
318
|
|
|
320
319
|
## Theme Stories `(lib/stories)`
|
|
321
320
|
|
|
322
|
-
Contains demo stories with MUI components. Every story is
|
|
321
|
+
Contains demo stories with MUI components. Every story is wrapped with a decorator defined in `libs/theme/.storybook/preview.js` component and can be toggled from light to dark theme. It does not export anything, it only shows the MUI components in light or dark theme.
|
|
323
322
|
|
|
324
323
|
- The **Color** story shows all the colors, styles and other properties of the defined theme. Could be handy for reviewing styling values. On the right the `geowebColor` object is shown, and these values are accessible throughout all components with the ThemeProvider wrapper. Not that more values are shown than given, this is because of the parsers that adds in some cases extra properties as for example `rgba`
|
|
325
324
|
- The **Elevation** shows all elevations we currently have. These can be used for defining `box-shadow` for elements. If you want to use the elevation in code:
|
package/index.esm.js
CHANGED
|
@@ -2398,10 +2398,10 @@ var colors$2 = {
|
|
|
2398
2398
|
cards: {
|
|
2399
2399
|
cardContainer: '#FFFFFF',
|
|
2400
2400
|
cardContainerBorder: '#EEEEEE',
|
|
2401
|
-
cardContainerMouseOver: '#
|
|
2401
|
+
cardContainerMouseOver: '#EFF5FF',
|
|
2402
2402
|
cardContainerDisabled: '#EBEBEB',
|
|
2403
2403
|
cardContainerDisabledBorder: '#E3E2E2',
|
|
2404
|
-
cardContainerDisabledMouseOver: '#
|
|
2404
|
+
cardContainerDisabledMouseOver: '#EFF5FF'
|
|
2405
2405
|
},
|
|
2406
2406
|
backdrops: {
|
|
2407
2407
|
black: {
|
|
@@ -2695,6 +2695,28 @@ var colors$2 = {
|
|
|
2695
2695
|
fill: '#7BACFF',
|
|
2696
2696
|
opacity: 0.2
|
|
2697
2697
|
}
|
|
2698
|
+
},
|
|
2699
|
+
chip: {
|
|
2700
|
+
highlightDefault: {
|
|
2701
|
+
fill: '#FFA800',
|
|
2702
|
+
opacity: 0.15,
|
|
2703
|
+
borderColor: '#374061'
|
|
2704
|
+
},
|
|
2705
|
+
highlightDefaultMouseOver: {
|
|
2706
|
+
fill: '#DEDBD4',
|
|
2707
|
+
opacity: 1,
|
|
2708
|
+
borderColor: '#374061'
|
|
2709
|
+
},
|
|
2710
|
+
highlightActiveDefault: {
|
|
2711
|
+
fill: '#566F94',
|
|
2712
|
+
opacity: 1,
|
|
2713
|
+
borderColor: 'transparent'
|
|
2714
|
+
},
|
|
2715
|
+
highlightActiveMouseOver: {
|
|
2716
|
+
fill: '#345596',
|
|
2717
|
+
opacity: 1,
|
|
2718
|
+
borderColor: 'transparent'
|
|
2719
|
+
}
|
|
2698
2720
|
}
|
|
2699
2721
|
};
|
|
2700
2722
|
// https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/609bb6a5287bd1abe0de39a7
|
|
@@ -3707,10 +3729,10 @@ var colors$1 = {
|
|
|
3707
3729
|
cards: {
|
|
3708
3730
|
cardContainer: '#313131',
|
|
3709
3731
|
cardContainerBorder: '#404040',
|
|
3710
|
-
cardContainerMouseOver: '#
|
|
3732
|
+
cardContainerMouseOver: '#414751',
|
|
3711
3733
|
cardContainerDisabled: '#252525',
|
|
3712
3734
|
cardContainerDisabledBorder: '#363636',
|
|
3713
|
-
cardContainerDisabledMouseOver: '#
|
|
3735
|
+
cardContainerDisabledMouseOver: '#414751'
|
|
3714
3736
|
},
|
|
3715
3737
|
backdrops: {
|
|
3716
3738
|
black: {
|
|
@@ -4005,6 +4027,28 @@ var colors$1 = {
|
|
|
4005
4027
|
fill: '#7BACFF',
|
|
4006
4028
|
opacity: 0.2
|
|
4007
4029
|
}
|
|
4030
|
+
},
|
|
4031
|
+
chip: {
|
|
4032
|
+
highlightDefault: {
|
|
4033
|
+
fill: '#FFA800',
|
|
4034
|
+
opacity: 0.15,
|
|
4035
|
+
borderColor: '#F8F9F9'
|
|
4036
|
+
},
|
|
4037
|
+
highlightDefaultMouseOver: {
|
|
4038
|
+
fill: '#DEDBD4',
|
|
4039
|
+
opacity: 1,
|
|
4040
|
+
borderColor: '#F8F9F9'
|
|
4041
|
+
},
|
|
4042
|
+
highlightActiveDefault: {
|
|
4043
|
+
fill: '#566F94',
|
|
4044
|
+
opacity: 1,
|
|
4045
|
+
borderColor: 'transparent'
|
|
4046
|
+
},
|
|
4047
|
+
highlightActiveMouseOver: {
|
|
4048
|
+
fill: '#345596',
|
|
4049
|
+
opacity: 1,
|
|
4050
|
+
borderColor: 'transparent'
|
|
4051
|
+
}
|
|
4008
4052
|
}
|
|
4009
4053
|
};
|
|
4010
4054
|
// https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e694124ecf3886de76d4
|
|
@@ -4042,7 +4086,7 @@ var focusButtonStyle = {
|
|
|
4042
4086
|
outline: 'solid 2px #FFFFFF'
|
|
4043
4087
|
};
|
|
4044
4088
|
// https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e5dc12278e35d433aa2d
|
|
4045
|
-
var colors = {
|
|
4089
|
+
var colors = Object.assign({}, colors$2, {
|
|
4046
4090
|
background: {
|
|
4047
4091
|
surface: '#9e1f1e',
|
|
4048
4092
|
surfaceApp: '#740c16',
|
|
@@ -4386,10 +4430,10 @@ var colors = {
|
|
|
4386
4430
|
cards: {
|
|
4387
4431
|
cardContainer: '#311c1c',
|
|
4388
4432
|
cardContainerBorder: '#404040',
|
|
4389
|
-
cardContainerMouseOver: '#
|
|
4433
|
+
cardContainerMouseOver: '#045725',
|
|
4390
4434
|
cardContainerDisabled: '#252525',
|
|
4391
4435
|
cardContainerDisabledBorder: '#363636',
|
|
4392
|
-
cardContainerDisabledMouseOver: '#
|
|
4436
|
+
cardContainerDisabledMouseOver: '#045725'
|
|
4393
4437
|
},
|
|
4394
4438
|
backdrops: {
|
|
4395
4439
|
black: {
|
|
@@ -4712,7 +4756,7 @@ var colors = {
|
|
|
4712
4756
|
backgroundColor: 'rgba(0, 35, 65, 0.95)',
|
|
4713
4757
|
backgroundRepeat: 'no-repeat'
|
|
4714
4758
|
}
|
|
4715
|
-
};
|
|
4759
|
+
});
|
|
4716
4760
|
// https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e694124ecf3886de76d4
|
|
4717
4761
|
var elevations = {
|
|
4718
4762
|
elevation_01: '0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)',
|
package/package.json
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './StoryHeader';
|
|
@@ -1,15 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Accordion as MuiAccordion } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof MuiAccordion>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const AccordionLight:
|
|
7
|
-
|
|
8
|
-
storyName: string;
|
|
9
|
-
tags: string[];
|
|
10
|
-
};
|
|
11
|
-
export declare const AccordionDark: {
|
|
12
|
-
(): React.ReactElement;
|
|
13
|
-
storyName: string;
|
|
14
|
-
tags: string[];
|
|
15
|
-
};
|
|
8
|
+
export declare const AccordionLight: Story;
|
|
9
|
+
export declare const AccordionDark: Story;
|
|
@@ -1,27 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Avatar as MuiAvatar } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof MuiAvatar>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const AvatarLight:
|
|
7
|
-
|
|
8
|
-
storyName: string;
|
|
9
|
-
tags: string[];
|
|
10
|
-
parameters: {
|
|
11
|
-
zeplinLink: {
|
|
12
|
-
name: string;
|
|
13
|
-
link: string;
|
|
14
|
-
}[];
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export declare const AvatarDark: {
|
|
18
|
-
(): React.ReactElement;
|
|
19
|
-
storyName: string;
|
|
20
|
-
tags: string[];
|
|
21
|
-
parameters: {
|
|
22
|
-
zeplinLink: {
|
|
23
|
-
name: string;
|
|
24
|
-
link: string;
|
|
25
|
-
}[];
|
|
26
|
-
};
|
|
27
|
-
};
|
|
8
|
+
export declare const AvatarLight: Story;
|
|
9
|
+
export declare const AvatarDark: Story;
|
|
@@ -1,16 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { Backdrop as MuiBackdrop } from '@mui/material';
|
|
3
|
+
import type { StoryObj } from '@storybook/react';
|
|
4
|
+
type Story = StoryObj<typeof MuiBackdrop>;
|
|
2
5
|
declare const _default: {
|
|
3
6
|
title: string;
|
|
4
7
|
};
|
|
5
8
|
export default _default;
|
|
6
9
|
export declare const BackDropDemo: () => React.ReactElement;
|
|
7
|
-
export declare const BackDropLight:
|
|
8
|
-
|
|
9
|
-
storyName: string;
|
|
10
|
-
tags: string[];
|
|
11
|
-
};
|
|
12
|
-
export declare const BackDropDark: {
|
|
13
|
-
(): React.ReactElement;
|
|
14
|
-
storyName: string;
|
|
15
|
-
tags: string[];
|
|
16
|
-
};
|
|
10
|
+
export declare const BackDropLight: Story;
|
|
11
|
+
export declare const BackDropDark: Story;
|
|
@@ -1,14 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
import { breakpoints } from '../utils/createTheme';
|
|
3
|
+
type Story = StoryObj<typeof breakpoints>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const Breakpoints:
|
|
7
|
-
(): React.ReactElement;
|
|
8
|
-
parameters: {
|
|
9
|
-
zeplinLink: {
|
|
10
|
-
name: string;
|
|
11
|
-
link: string;
|
|
12
|
-
}[];
|
|
13
|
-
};
|
|
14
|
-
};
|
|
8
|
+
export declare const Breakpoints: Story;
|
|
@@ -1,27 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Button } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof Button>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const ButtonLight:
|
|
7
|
-
|
|
8
|
-
storyName: string;
|
|
9
|
-
tags: string[];
|
|
10
|
-
parameters: {
|
|
11
|
-
zeplinLink: {
|
|
12
|
-
name: string;
|
|
13
|
-
link: string;
|
|
14
|
-
}[];
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export declare const ButtonDark: {
|
|
18
|
-
(): React.ReactElement;
|
|
19
|
-
storyName: string;
|
|
20
|
-
tags: string[];
|
|
21
|
-
parameters: {
|
|
22
|
-
zeplinLink: {
|
|
23
|
-
name: string;
|
|
24
|
-
link: string;
|
|
25
|
-
}[];
|
|
26
|
-
};
|
|
27
|
-
};
|
|
8
|
+
export declare const ButtonLight: Story;
|
|
9
|
+
export declare const ButtonDark: Story;
|
|
@@ -1,27 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Card } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof Card>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const CardsLight:
|
|
7
|
-
|
|
8
|
-
storyName: string;
|
|
9
|
-
tags: string[];
|
|
10
|
-
parameters: {
|
|
11
|
-
zeplinLink: {
|
|
12
|
-
name: string;
|
|
13
|
-
link: string;
|
|
14
|
-
}[];
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export declare const CardsDark: {
|
|
18
|
-
(): React.ReactElement;
|
|
19
|
-
storyName: string;
|
|
20
|
-
tags: string[];
|
|
21
|
-
parameters: {
|
|
22
|
-
zeplinLink: {
|
|
23
|
-
name: string;
|
|
24
|
-
link: string;
|
|
25
|
-
}[];
|
|
26
|
-
};
|
|
27
|
-
};
|
|
8
|
+
export declare const CardsLight: Story;
|
|
9
|
+
export declare const CardsDark: Story;
|
|
@@ -1,29 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Typography } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof Typography>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const ColorsLight:
|
|
7
|
-
|
|
8
|
-
storyName: string;
|
|
9
|
-
tags: string[];
|
|
10
|
-
parameters: {
|
|
11
|
-
zeplinLink: {
|
|
12
|
-
name: string;
|
|
13
|
-
link: string;
|
|
14
|
-
}[];
|
|
15
|
-
layout: string;
|
|
16
|
-
};
|
|
17
|
-
};
|
|
18
|
-
export declare const ColorsDark: {
|
|
19
|
-
(): React.ReactElement;
|
|
20
|
-
storyName: string;
|
|
21
|
-
tags: string[];
|
|
22
|
-
parameters: {
|
|
23
|
-
zeplinkLink: {
|
|
24
|
-
name: string;
|
|
25
|
-
link: string;
|
|
26
|
-
}[];
|
|
27
|
-
layout: string;
|
|
28
|
-
};
|
|
29
|
-
};
|
|
8
|
+
export declare const ColorsLight: Story;
|
|
9
|
+
export declare const ColorsDark: Story;
|
|
@@ -1,30 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Typography } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof Typography>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const
|
|
7
|
-
export declare const
|
|
8
|
-
(): React.ReactElement;
|
|
9
|
-
parameters: {
|
|
10
|
-
zeplinLink: {
|
|
11
|
-
name: string;
|
|
12
|
-
link: string;
|
|
13
|
-
}[];
|
|
14
|
-
layout: string;
|
|
15
|
-
};
|
|
16
|
-
storyName: string;
|
|
17
|
-
tags: string[];
|
|
18
|
-
};
|
|
19
|
-
export declare const ElevationDark: {
|
|
20
|
-
(): React.ReactElement;
|
|
21
|
-
parameters: {
|
|
22
|
-
zeplinLink: {
|
|
23
|
-
name: string;
|
|
24
|
-
link: string;
|
|
25
|
-
}[];
|
|
26
|
-
layout: string;
|
|
27
|
-
};
|
|
28
|
-
storyName: string;
|
|
29
|
-
tags: string[];
|
|
30
|
-
};
|
|
8
|
+
export declare const ElevationLight: Story;
|
|
9
|
+
export declare const ElevationDark: Story;
|
|
@@ -1,27 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Box } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof Box>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const FormElementsLight:
|
|
7
|
-
|
|
8
|
-
storyName: string;
|
|
9
|
-
tags: string[];
|
|
10
|
-
parameters: {
|
|
11
|
-
zeplinLink: {
|
|
12
|
-
name: string;
|
|
13
|
-
link: string;
|
|
14
|
-
}[];
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export declare const FormElementsDark: {
|
|
18
|
-
(): React.ReactElement;
|
|
19
|
-
storyName: string;
|
|
20
|
-
tags: string[];
|
|
21
|
-
parameters: {
|
|
22
|
-
zeplinLink: {
|
|
23
|
-
name: string;
|
|
24
|
-
link: string;
|
|
25
|
-
}[];
|
|
26
|
-
};
|
|
27
|
-
};
|
|
8
|
+
export declare const FormElementsLight: Story;
|
|
9
|
+
export declare const FormElementsDark: Story;
|
|
@@ -1,27 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { IconButton } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof IconButton>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const IconButtonLight:
|
|
7
|
-
|
|
8
|
-
storyName: string;
|
|
9
|
-
tags: string[];
|
|
10
|
-
parameters: {
|
|
11
|
-
zeplinLink: {
|
|
12
|
-
name: string;
|
|
13
|
-
link: string;
|
|
14
|
-
}[];
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export declare const IconButtonDark: {
|
|
18
|
-
(): React.ReactElement;
|
|
19
|
-
storyName: string;
|
|
20
|
-
tags: string[];
|
|
21
|
-
parameters: {
|
|
22
|
-
zeplinLink: {
|
|
23
|
-
name: string;
|
|
24
|
-
link: string;
|
|
25
|
-
}[];
|
|
26
|
-
};
|
|
27
|
-
};
|
|
8
|
+
export declare const IconButtonLight: Story;
|
|
9
|
+
export declare const IconButtonDark: Story;
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
import * as IconList from '../components/Icons';
|
|
4
|
+
type Story = StoryObj<typeof IconList>;
|
|
2
5
|
declare const _default: {
|
|
3
6
|
title: string;
|
|
4
7
|
};
|
|
@@ -7,13 +10,5 @@ export interface IconGridItemProps {
|
|
|
7
10
|
name: string;
|
|
8
11
|
icon: React.ReactNode;
|
|
9
12
|
}
|
|
10
|
-
export declare const IconsLight:
|
|
11
|
-
|
|
12
|
-
storyName: string;
|
|
13
|
-
tags: string[];
|
|
14
|
-
};
|
|
15
|
-
export declare const IconsDark: {
|
|
16
|
-
(): React.ReactElement;
|
|
17
|
-
storyName: string;
|
|
18
|
-
tags: string[];
|
|
19
|
-
};
|
|
13
|
+
export declare const IconsLight: Story;
|
|
14
|
+
export declare const IconsDark: Story;
|
|
@@ -1,27 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { List as MuiList } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof MuiList>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const ListLight:
|
|
7
|
-
|
|
8
|
-
storyName: string;
|
|
9
|
-
tags: string[];
|
|
10
|
-
parameters: {
|
|
11
|
-
zeplinLink: {
|
|
12
|
-
name: string;
|
|
13
|
-
link: string;
|
|
14
|
-
}[];
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export declare const ListDark: {
|
|
18
|
-
(): React.ReactElement;
|
|
19
|
-
storyName: string;
|
|
20
|
-
tags: string[];
|
|
21
|
-
parameters: {
|
|
22
|
-
zeplinLink: {
|
|
23
|
-
name: string;
|
|
24
|
-
link: string;
|
|
25
|
-
}[];
|
|
26
|
-
};
|
|
27
|
-
};
|
|
8
|
+
export declare const ListLight: Story;
|
|
9
|
+
export declare const ListDark: Story;
|
|
@@ -1,28 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { MenuItem as MuiMenuItem } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof MuiMenuItem>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
tags: string[];
|
|
5
7
|
};
|
|
6
8
|
export default _default;
|
|
7
|
-
export declare const MenuItemLight:
|
|
8
|
-
|
|
9
|
-
storyName: string;
|
|
10
|
-
tags: string[];
|
|
11
|
-
parameters: {
|
|
12
|
-
zeplinLink: {
|
|
13
|
-
name: string;
|
|
14
|
-
link: string;
|
|
15
|
-
}[];
|
|
16
|
-
};
|
|
17
|
-
};
|
|
18
|
-
export declare const MenuItemDark: {
|
|
19
|
-
(): React.ReactElement;
|
|
20
|
-
storyName: string;
|
|
21
|
-
tags: string[];
|
|
22
|
-
parameters: {
|
|
23
|
-
zeplinLink: {
|
|
24
|
-
name: string;
|
|
25
|
-
link: string;
|
|
26
|
-
}[];
|
|
27
|
-
};
|
|
28
|
-
};
|
|
9
|
+
export declare const MenuItemLight: Story;
|
|
10
|
+
export declare const MenuItemDark: Story;
|
|
@@ -1,27 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Select as MuiSelect } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof MuiSelect>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const SelectLight:
|
|
7
|
-
|
|
8
|
-
storyName: string;
|
|
9
|
-
tags: string[];
|
|
10
|
-
parameters: {
|
|
11
|
-
zeplinLink: {
|
|
12
|
-
name: string;
|
|
13
|
-
link: string;
|
|
14
|
-
}[];
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export declare const SelectDark: {
|
|
18
|
-
(): React.ReactElement;
|
|
19
|
-
storyName: string;
|
|
20
|
-
tags: string[];
|
|
21
|
-
parameters: {
|
|
22
|
-
zeplinLink: {
|
|
23
|
-
name: string;
|
|
24
|
-
link: string;
|
|
25
|
-
}[];
|
|
26
|
-
};
|
|
27
|
-
};
|
|
8
|
+
export declare const SelectLight: Story;
|
|
9
|
+
export declare const SelectDark: Story;
|
|
@@ -1,27 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Slider as MuiSlider } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof MuiSlider>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const SliderLight:
|
|
7
|
-
|
|
8
|
-
storyName: string;
|
|
9
|
-
tags: string[];
|
|
10
|
-
parameters: {
|
|
11
|
-
zeplinLink: {
|
|
12
|
-
name: string;
|
|
13
|
-
link: string;
|
|
14
|
-
}[];
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export declare const SliderDark: {
|
|
18
|
-
(): React.ReactElement;
|
|
19
|
-
storyName: string;
|
|
20
|
-
tags: string[];
|
|
21
|
-
parameters: {
|
|
22
|
-
zeplinLink: {
|
|
23
|
-
name: string;
|
|
24
|
-
link: string;
|
|
25
|
-
}[];
|
|
26
|
-
};
|
|
27
|
-
};
|
|
8
|
+
export declare const SliderLight: Story;
|
|
9
|
+
export declare const SliderDark: Story;
|
|
@@ -1,27 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Snackbar as MuiSnackbar } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof MuiSnackbar>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const SnackbarLight:
|
|
7
|
-
|
|
8
|
-
storyName: string;
|
|
9
|
-
tags: string[];
|
|
10
|
-
parameters: {
|
|
11
|
-
zeplinLink: {
|
|
12
|
-
name: string;
|
|
13
|
-
link: string;
|
|
14
|
-
}[];
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export declare const SnackbarDark: {
|
|
18
|
-
(): React.ReactElement;
|
|
19
|
-
storyName: string;
|
|
20
|
-
tags: string[];
|
|
21
|
-
parameters: {
|
|
22
|
-
zeplinLink: {
|
|
23
|
-
name: string;
|
|
24
|
-
link: string;
|
|
25
|
-
}[];
|
|
26
|
-
};
|
|
27
|
-
};
|
|
8
|
+
export declare const SnackbarLight: Story;
|
|
9
|
+
export declare const SnackbarDark: Story;
|
|
@@ -1,27 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Switch as MuiSwitch } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof MuiSwitch>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const SwitchLight:
|
|
7
|
-
|
|
8
|
-
storyName: string;
|
|
9
|
-
tags: string[];
|
|
10
|
-
parameters: {
|
|
11
|
-
zeplinLink: {
|
|
12
|
-
name: string;
|
|
13
|
-
link: string;
|
|
14
|
-
}[];
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export declare const SwitchDark: {
|
|
18
|
-
(): React.ReactElement;
|
|
19
|
-
storyName: string;
|
|
20
|
-
tags: string[];
|
|
21
|
-
parameters: {
|
|
22
|
-
zeplinLink: {
|
|
23
|
-
name: string;
|
|
24
|
-
link: string;
|
|
25
|
-
}[];
|
|
26
|
-
};
|
|
27
|
-
};
|
|
8
|
+
export declare const SwitchLight: Story;
|
|
9
|
+
export declare const SwitchDark: Story;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Table as MuiTable } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof MuiTable>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
@@ -10,27 +12,5 @@ export interface ExampleRow {
|
|
|
10
12
|
carbs: number;
|
|
11
13
|
protein: number;
|
|
12
14
|
}
|
|
13
|
-
export declare const TableLight:
|
|
14
|
-
|
|
15
|
-
storyName: string;
|
|
16
|
-
tags: string[];
|
|
17
|
-
parameters: {
|
|
18
|
-
zeplinLink: {
|
|
19
|
-
name: string;
|
|
20
|
-
link: string;
|
|
21
|
-
}[];
|
|
22
|
-
layout: string;
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
|
-
export declare const TableDark: {
|
|
26
|
-
(): React.ReactElement;
|
|
27
|
-
storyName: string;
|
|
28
|
-
tags: string[];
|
|
29
|
-
parameters: {
|
|
30
|
-
zeplinLink: {
|
|
31
|
-
name: string;
|
|
32
|
-
link: string;
|
|
33
|
-
}[];
|
|
34
|
-
layout: string;
|
|
35
|
-
};
|
|
36
|
-
};
|
|
15
|
+
export declare const TableLight: Story;
|
|
16
|
+
export declare const TableDark: Story;
|
|
@@ -1,27 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Tabs as MuiTabs } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof MuiTabs>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const TabsLight:
|
|
7
|
-
|
|
8
|
-
storyName: string;
|
|
9
|
-
tags: string[];
|
|
10
|
-
parameters: {
|
|
11
|
-
zeplinLink: {
|
|
12
|
-
name: string;
|
|
13
|
-
link: string;
|
|
14
|
-
}[];
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export declare const TabsDark: {
|
|
18
|
-
(): React.ReactElement;
|
|
19
|
-
storyName: string;
|
|
20
|
-
tags: string[];
|
|
21
|
-
parameters: {
|
|
22
|
-
zeplinLink: {
|
|
23
|
-
name: string;
|
|
24
|
-
link: string;
|
|
25
|
-
}[];
|
|
26
|
-
};
|
|
27
|
-
};
|
|
8
|
+
export declare const TabsLight: Story;
|
|
9
|
+
export declare const TabsDark: Story;
|
|
@@ -1,27 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { TextField as MuiTextField } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof MuiTextField>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const TextFieldLight:
|
|
7
|
-
|
|
8
|
-
storyName: string;
|
|
9
|
-
tags: string[];
|
|
10
|
-
parameters: {
|
|
11
|
-
zeplinLink: {
|
|
12
|
-
name: string;
|
|
13
|
-
link: string;
|
|
14
|
-
}[];
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export declare const TextFieldDark: {
|
|
18
|
-
(): React.ReactElement;
|
|
19
|
-
storyName: string;
|
|
20
|
-
tags: string[];
|
|
21
|
-
parameters: {
|
|
22
|
-
zeplinLink: {
|
|
23
|
-
name: string;
|
|
24
|
-
link: string;
|
|
25
|
-
}[];
|
|
26
|
-
};
|
|
27
|
-
};
|
|
8
|
+
export declare const TextFieldLight: Story;
|
|
9
|
+
export declare const TextFieldDark: Story;
|
|
@@ -1,27 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ToggleButton } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof ToggleButton>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const ToggleButtonsLight:
|
|
7
|
-
|
|
8
|
-
storyName: string;
|
|
9
|
-
tags: string[];
|
|
10
|
-
parameters: {
|
|
11
|
-
zeplinLink: {
|
|
12
|
-
name: string;
|
|
13
|
-
link: string;
|
|
14
|
-
}[];
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export declare const ToggleButtonsDark: {
|
|
18
|
-
(): React.ReactElement;
|
|
19
|
-
storyName: string;
|
|
20
|
-
tags: string[];
|
|
21
|
-
parameters: {
|
|
22
|
-
zeplinLink: {
|
|
23
|
-
name: string;
|
|
24
|
-
link: string;
|
|
25
|
-
}[];
|
|
26
|
-
};
|
|
27
|
-
};
|
|
8
|
+
export declare const ToggleButtonsLight: Story;
|
|
9
|
+
export declare const ToggleButtonsDark: Story;
|
|
@@ -1,27 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Tooltip } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof Tooltip>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const TooltipLight:
|
|
7
|
-
|
|
8
|
-
storyName: string;
|
|
9
|
-
tags: string[];
|
|
10
|
-
parameters: {
|
|
11
|
-
zeplinLink: {
|
|
12
|
-
name: string;
|
|
13
|
-
link: string;
|
|
14
|
-
}[];
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export declare const TooltipDark: {
|
|
18
|
-
(): React.ReactElement;
|
|
19
|
-
storyName: string;
|
|
20
|
-
tags: string[];
|
|
21
|
-
parameters: {
|
|
22
|
-
zeplinLink: {
|
|
23
|
-
name: string;
|
|
24
|
-
link: string;
|
|
25
|
-
}[];
|
|
26
|
-
};
|
|
27
|
-
};
|
|
8
|
+
export declare const TooltipLight: Story;
|
|
9
|
+
export declare const TooltipDark: Story;
|
|
@@ -1,27 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Typography as MuiTypography } from '@mui/material';
|
|
2
|
+
import type { StoryObj } from '@storybook/react';
|
|
3
|
+
type Story = StoryObj<typeof MuiTypography>;
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const TypographyLight:
|
|
7
|
-
|
|
8
|
-
storyName: string;
|
|
9
|
-
tags: string[];
|
|
10
|
-
parameters: {
|
|
11
|
-
zeplinLink: {
|
|
12
|
-
name: string;
|
|
13
|
-
link: string;
|
|
14
|
-
}[];
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export declare const TypographyDark: {
|
|
18
|
-
(): React.ReactElement;
|
|
19
|
-
storyName: string;
|
|
20
|
-
tags: string[];
|
|
21
|
-
parameters: {
|
|
22
|
-
zeplinLink: {
|
|
23
|
-
name: string;
|
|
24
|
-
link: string;
|
|
25
|
-
}[];
|
|
26
|
-
};
|
|
27
|
-
};
|
|
8
|
+
export declare const TypographyLight: Story;
|
|
9
|
+
export declare const TypographyDark: Story;
|
package/src/lib/types.d.ts
CHANGED
|
@@ -211,6 +211,12 @@ export interface GeowebColorPalette {
|
|
|
211
211
|
festoonOverlay?: CSSProperties;
|
|
212
212
|
festoonContainer?: CSSProperties;
|
|
213
213
|
festoonBackdrop?: CSSProperties;
|
|
214
|
+
chip: {
|
|
215
|
+
highlightDefault: CSSProperties;
|
|
216
|
+
highlightDefaultMouseOver: CSSProperties;
|
|
217
|
+
highlightActiveDefault: CSSProperties;
|
|
218
|
+
highlightActiveMouseOver: CSSProperties;
|
|
219
|
+
};
|
|
214
220
|
}
|
|
215
221
|
export type Elevations = Record<string, string>;
|
|
216
222
|
declare module '@mui/material/styles' {
|
|
File without changes
|