From 5117155f69ec0a41d167e531fd10893477111009 Mon Sep 17 00:00:00 2001 From: Jeremy Davis Date: Fri, 14 Apr 2023 11:42:50 +0200 Subject: [PATCH] SONAR-19018 Add layout components --- .../src/components/__tests__/layouts-test.tsx | 43 +++++++++++++++++++ .../design-system/src/components/index.ts | 1 + .../design-system/src/components/layouts.tsx | 42 ++++++++++++++++++ .../design-system/src/helpers/constants.ts | 2 + server/sonar-web/tailwind.base.config.js | 1 + 5 files changed, 89 insertions(+) create mode 100644 server/sonar-web/design-system/src/components/__tests__/layouts-test.tsx create mode 100644 server/sonar-web/design-system/src/components/layouts.tsx diff --git a/server/sonar-web/design-system/src/components/__tests__/layouts-test.tsx b/server/sonar-web/design-system/src/components/__tests__/layouts-test.tsx new file mode 100644 index 00000000000..02e32e26edf --- /dev/null +++ b/server/sonar-web/design-system/src/components/__tests__/layouts-test.tsx @@ -0,0 +1,43 @@ +/* + * SonarQube + * Copyright (C) 2009-2023 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import { render, screen } from '@testing-library/react'; +import { CenteredLayout, LargeCenteredLayout } from '../layouts'; + +describe('CenteredLayout', () => { + it('should render as expected', () => { + render(content); + + expect(screen.getByText('content')).toHaveStyle({ + 'min-width': '1280px', + 'max-width': '1400px', + }); + }); +}); + +describe('LargeCenteredLayout', () => { + it('should render as expected', () => { + render(content); + + expect(screen.getByText('content')).toHaveStyle({ + 'min-width': '1280px', + 'max-width': '1680px', + }); + }); +}); diff --git a/server/sonar-web/design-system/src/components/index.ts b/server/sonar-web/design-system/src/components/index.ts index 41748cd06e9..cda65984092 100644 --- a/server/sonar-web/design-system/src/components/index.ts +++ b/server/sonar-web/design-system/src/components/index.ts @@ -49,4 +49,5 @@ export { ToggleButton } from './ToggleButton'; export { TopBar } from './TopBar'; export * from './buttons'; export * from './icons'; +export * from './layouts'; export * from './popups'; diff --git a/server/sonar-web/design-system/src/components/layouts.tsx b/server/sonar-web/design-system/src/components/layouts.tsx new file mode 100644 index 00000000000..71e0b4f64f4 --- /dev/null +++ b/server/sonar-web/design-system/src/components/layouts.tsx @@ -0,0 +1,42 @@ +/* + * SonarQube + * Copyright (C) 2009-2023 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import styled from '@emotion/styled'; +import tw from 'twin.macro'; +import { + LAYOUT_VIEWPORT_MAX_WIDTH, + LAYOUT_VIEWPORT_MAX_WIDTH_LARGE, + LAYOUT_VIEWPORT_MIN_WIDTH, +} from '../helpers'; + +const BaseLayout = styled.div` + box-sizing: border-box; + min-width: ${LAYOUT_VIEWPORT_MIN_WIDTH}px; + margin: 0 auto; + + ${tw`sw-px-14`} +`; + +export const CenteredLayout = styled(BaseLayout)` + max-width: ${LAYOUT_VIEWPORT_MAX_WIDTH}px; +`; + +export const LargeCenteredLayout = styled(BaseLayout)` + max-width: ${LAYOUT_VIEWPORT_MAX_WIDTH_LARGE}px; +`; diff --git a/server/sonar-web/design-system/src/helpers/constants.ts b/server/sonar-web/design-system/src/helpers/constants.ts index c47e78cf7ed..9d87c9245ee 100644 --- a/server/sonar-web/design-system/src/helpers/constants.ts +++ b/server/sonar-web/design-system/src/helpers/constants.ts @@ -50,6 +50,8 @@ export const INPUT_SIZES = { }; export const LAYOUT_VIEWPORT_MIN_WIDTH = 1280; +export const LAYOUT_VIEWPORT_MAX_WIDTH = 1400; +export const LAYOUT_VIEWPORT_MAX_WIDTH_LARGE = 1680; export const LAYOUT_MAIN_CONTENT_GUTTER = 60; export const LAYOUT_SIDEBAR_WIDTH = 240; export const LAYOUT_SIDEBAR_COLLAPSED_WIDTH = 60; diff --git a/server/sonar-web/tailwind.base.config.js b/server/sonar-web/tailwind.base.config.js index 2670b330921..48c1fafaa40 100644 --- a/server/sonar-web/tailwind.base.config.js +++ b/server/sonar-web/tailwind.base.config.js @@ -76,6 +76,7 @@ module.exports = { 8: '2rem', // 32px 10: '2.5rem', // 40px 12: '3rem', // 48px + 14: '3.75rem', // 60px 16: '4rem', // 64px 24: '6rem', // 96px 32: '8rem', // 128px -- 2.39.5