Skip to content

Commit 0becc8c

Browse files
swissspidyswissspidy
committed
Merge branch 'main' into fix/composer-patches
2 parents 40372fc + af38560 commit 0becc8c

File tree

120 files changed

+3990
-247
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

120 files changed

+3990
-247
lines changed

‎.github/workflows/continuous-integration-lint-php.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,6 @@ jobs:
5454
- name: Normalize composer.json
5555
# composer-normalize requires PHP 7.1+. Ignore version conflicts.
5656
run: |
57-
composer require --no-interaction --dev ergebnis/composer-normalize --ignore-platform-reqs
57+
composer require --no-interaction --dev ergebnis/composer-normalize:2.9.0 --ignore-platform-reqs
5858
composer --no-interaction normalize --dry-run
5959
if: always()

‎.storybook/main.cjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ module.exports = {
1818
stories: [
1919
'./stories/**/*.js',
2020
'../assets/src/dashboard/**/stories/*.@(js|mdx)',
21+
'../assets/src/design-system/**/stories/*.@(js|mdx)',
2122
'../assets/src/edit-story/**/stories/*.@(js|mdx)',
2223
'../assets/src/animation/**/stories/*.@(js|mdx)',
2324
'../assets/src/activation-notice/**/stories/*.@(js|mdx)',

‎.storybook/preview.js‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,11 @@ import DashboardKeyboardOnlyOutline from '../assets/src/dashboard/utils/keyboard
4040
import { ConfigProvider } from '../assets/src/dashboard/app/config';
4141
import ApiProvider from '../assets/src/dashboard/app/api/apiProvider';
4242

43+
import {
44+
theme as designSystemTheme,
45+
lightMode,
46+
} from '../assets/src/design-system/theme';
47+
4348
// @todo: Find better way to mock these.
4449
const wp = {};
4550
window.wp = window.wp || wp;
@@ -81,9 +86,10 @@ addParameters({
8186
addDecorator(withKnobs);
8287

8388
addDecorator((story, { id }) => {
84-
const useDashboardTheme = id.startsWith('dashboard');
89+
const isDesignSystemStorybook = id.startsWith('designsystem');
90+
const isDashboardStorybook = id.startsWith('dashboard');
8591

86-
if (useDashboardTheme) {
92+
if (isDashboardStorybook) {
8793
return (
8894
<FlagsProvider features={{ enableAnimation: true }}>
8995
<ThemeProvider theme={dashboardTheme}>
@@ -102,6 +108,12 @@ addDecorator((story, { id }) => {
102108
);
103109
}
104110

111+
if (isDesignSystemStorybook) {
112+
// override darkMode colors
113+
const dsTheme = { ...designSystemTheme, colors: { ...lightMode } };
114+
return <ThemeProvider theme={dsTheme}>{story()}</ThemeProvider>;
115+
}
116+
105117
return (
106118
<FlagsProvider features={{ enableAnimation: true }}>
107119
<ThemeProvider theme={theme}>

‎assets/src/design-system/components/index.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/*
2+
* Copyright 2020 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
export * from './typography';

‎assets/src/design-system/components/typography/display/index.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/*
2+
* Copyright 2020 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/**
18+
* External dependencies
19+
*/
20+
import styled, { css } from 'styled-components';
21+
import PropTypes from 'prop-types';
22+
23+
/**
24+
* Internal dependencies
25+
*/
26+
import { THEME_CONSTANTS } from '../../../theme';
27+
import { defaultTypographyStyle } from '../styles';
28+
29+
export const Display = styled.h1`
30+
${defaultTypographyStyle}
31+
${({ size, theme }) =>
32+
css`
33+
font-size: ${theme.typography.presets.display[size].size}px;
34+
font-weight: ${theme.typography.presets.display[size].weight};
35+
line-height: ${theme.typography.presets.display[size].lineHeight}px;
36+
letter-spacing: ${theme.typography.presets.display[size].letterSpacing}px;
37+
`}
38+
`;
39+
40+
Display.propTypes = {
41+
as: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']).isRequired,
42+
size: PropTypes.oneOf(THEME_CONSTANTS.DISPLAY_SIZES),
43+
};
44+
Display.defaultProps = {
45+
size: THEME_CONSTANTS.TYPOGRAPHY_PRESET_SIZES.MEDIUM,
46+
};

‎assets/src/design-system/components/typography/display/stories/index.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/*
2+
* Copyright 2020 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/**
18+
* External dependencies
19+
*/
20+
import { select } from '@storybook/addon-knobs';
21+
22+
/**
23+
* Internal dependencies
24+
*/
25+
import { THEME_CONSTANTS } from '../../../..';
26+
import { Text } from '../../';
27+
import { Display } from '..';
28+
29+
export default {
30+
title: 'DesignSystem/Components/Typography/Display',
31+
component: Display,
32+
};
33+
34+
const displayPresetSizes = THEME_CONSTANTS.DISPLAY_SIZES;
35+
const displayRenderAsOptions = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
36+
37+
export const _default = () => (
38+
<>
39+
{displayPresetSizes.map((presetSize) => (
40+
<div key={`${presetSize}_display`}>
41+
<Text size={'small'}>{presetSize}</Text>
42+
43+
<Display
44+
size={presetSize}
45+
as={select('as', displayRenderAsOptions, 'h1')}
46+
>
47+
{'The Quick Brown Fox Jumps Over the Lazy Dog'} <br />
48+
</Display>
49+
</div>
50+
))}
51+
</>
52+
);

‎assets/src/design-system/components/typography/headline/index.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/*
2+
* Copyright 2020 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/**
18+
* External dependencies
19+
*/
20+
import styled, { css } from 'styled-components';
21+
import PropTypes from 'prop-types';
22+
23+
/**
24+
* Internal dependencies
25+
*/
26+
import { THEME_CONSTANTS } from '../../../theme';
27+
import { defaultTypographyStyle } from '../styles';
28+
29+
export const Headline = styled.h1`
30+
${defaultTypographyStyle};
31+
32+
${({ theme, size }) =>
33+
css`
34+
font-size: ${theme.typography.presets.headline[size].size}px;
35+
font-weight: ${theme.typography.presets.headline[size].weight};
36+
line-height: ${theme.typography.presets.headline[size].lineHeight}px;
37+
letter-spacing: ${theme.typography.presets.headline[size]
38+
.letterSpacing}px;
39+
`}
40+
`;
41+
42+
Headline.propTypes = {
43+
as: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']).isRequired,
44+
size: PropTypes.oneOf(THEME_CONSTANTS.HEADLINE_SIZES),
45+
};
46+
Headline.defaultProps = {
47+
size: THEME_CONSTANTS.TYPOGRAPHY_PRESET_SIZES.MEDIUM,
48+
};

‎assets/src/design-system/components/typography/headline/stories/index.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/*
2+
* Copyright 2020 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/**
18+
* External dependencies
19+
*/
20+
import { select } from '@storybook/addon-knobs';
21+
22+
/**
23+
* Internal dependencies
24+
*/
25+
import { THEME_CONSTANTS } from '../../../../';
26+
import { Text } from '../../';
27+
import { Headline } from '..';
28+
29+
export default {
30+
title: 'DesignSystem/Components/Typography/Headline',
31+
component: Headline,
32+
};
33+
34+
const headlinePresetSizes = THEME_CONSTANTS.HEADLINE_SIZES;
35+
const headlineRenderAsOptions = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
36+
37+
export const _default = () => (
38+
<>
39+
{headlinePresetSizes.map((presetSize) => (
40+
<div key={`${presetSize}_headline`}>
41+
<Text size={'small'}>{presetSize}</Text>
42+
<Headline
43+
size={presetSize}
44+
as={select('as', headlineRenderAsOptions, 'h1')}
45+
>
46+
{'The Quick Brown Fox Jumps Over the Lazy Dog'}
47+
</Headline>
48+
</div>
49+
))}
50+
</>
51+
);

‎assets/src/design-system/components/typography/index.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/*
2+
* Copyright 2020 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
export { Display } from './display';
18+
export { Headline } from './headline';
19+
export { Text } from './text';

‎assets/src/design-system/components/typography/styles.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*
2+
* Copyright 2020 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
/**
17+
* External dependencies
18+
*/
19+
import { css } from 'styled-components';
20+
21+
export const defaultTypographyStyle = ({ theme }) => css`
22+
font-family: ${theme.typography.family.primary};
23+
color: ${theme.colors.fg.primary};
24+
margin: 0;
25+
padding: 0;
26+
`;

0 commit comments

Comments
 (0)