SONAR-19018 Add layout components

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 (file)
index 0000000..02e32e2
--- /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(<CenteredLayout>content</CenteredLayout>);
+
+    expect(screen.getByText('content')).toHaveStyle({
+      'min-width': '1280px',
+      'max-width': '1400px',
+    });
+  });
+});
+
+describe('LargeCenteredLayout', () => {
+  it('should render as expected', () => {
+    render(<LargeCenteredLayout>content</LargeCenteredLayout>);
+
+    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 41748cd06e9e99a1dc2d6ecd233f34c13a611403..cda65984092ef15072738d6980d7449b3e7476e3 100644 (file)
--- 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 (file)
index 0000000..71e0b4f
--- /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 c47e78cf7eded97759ed2ab3d3e72b4e22756f8b..9d87c9245ee9a53ab5d731dccf030f5b98a2d6f3 100644 (file)
--- 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 2670b330921d77b08a2e5de9577e1155fd5c328d..48c1fafaa406de0adb6f1504645419f472f197ad 100644 (file)
--- 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