Add cards and section component. (#19168)

* Add filled section component.

* Add card component.

* Add mantine css for styleguide.

* Update sawmill

graylog2-web-interface/docs/StyleGuideWrapper.tsx

@@ -26,6 +26,9 @@ import User from '../src/logic/users/User';
 import UserDateTimeProvider from '../src/contexts/UserDateTimeProvider';
 /* eslint-enable import/no-relative-packages */
 
+import '@graylog/sawmill/fonts';
+import '@mantine/core/styles.css';
+
 export const adminUser = User.builder()
   .id('admin-id')
   .username('admin')

graylog2-web-interface/packages/graylog-web-plugin/package.json

@@ -29,7 +29,7 @@
     "extends": "graylog"
   },
   "dependencies": {
-    "@graylog/sawmill": "2.0.15",
+    "@graylog/sawmill": "2.0.16",
     "@tanstack/react-query": "4.36.1",
     "@types/create-react-class": "15.6.8",
     "@types/jquery": "3.5.29",

graylog2-web-interface/src/components/common/Card.md

@@ -0,0 +1,11 @@
+Most basic usage.
+```tsx
+  <Card>The children</Card>
+```
+
+With small padding.
+```tsx
+  <Card padding="sm">
+    The children
+  </Card>
+```

graylog2-web-interface/src/components/common/Card.test.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * 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
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React from 'react';
+import { render, screen } from 'wrappedTestingLibrary';
+
+import Card from './Card';
+
+describe('Card', () => {
+  it('should render children', async () => {
+    render(<Card>The children</Card>);
+
+    await screen.findByText(/the children/i);
+  });
+});

graylog2-web-interface/src/components/common/Card.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * 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
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { Card as MantineCard } from '@mantine/core';
+
+const Container = styled(MantineCard)(({ theme }) => css`
+  background-color: ${theme.colors.cards.background};
+  border-color: ${theme.colors.cards.border};
+`);
+
+type Props = React.PropsWithChildren<{
+  className?: string,
+  padding?: 'sm',
+}>
+
+/**
+ * Simple card component.
+ */
+const Card = ({ children, className, padding }: Props) => (
+  <Container className={className} shadow="sm" padding={padding} radius="md" withBorder>
+    {children}
+  </Container>
+);
+
+Card.defaultProps = {
+  className: undefined,
+  padding: undefined,
+};
+
+export default Card;

graylog2-web-interface/src/components/common/Section.md

@@ -0,0 +1,13 @@
+Most basic usage.
+```tsx
+  <Section title="The Title">The children</Section>
+```
+
+With actions.
+```tsx
+  import { Button } from 'components/bootstrap';
+
+  <Section title="The Title" actions={<Button>An Action</Button>}>
+    The children
+  </Section>
+```

graylog2-web-interface/src/components/common/Section.test.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * 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
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React from 'react';
+import { render, screen } from 'wrappedTestingLibrary';
+
+import Section from './Section';
+
+describe('Section', () => {
+  it('should render children', async () => {
+    render(<Section title="The Title">The children</Section>);
+
+    await screen.findByRole('heading', { name: /the title/i });
+    await screen.findByText(/the children/i);
+  });
+
+  it('should render actions', async () => {
+    render(
+      <Section title="The Title" actions="The actions">
+        The children
+      </Section>,
+    );
+
+    await screen.findByRole('heading', { name: /the title/i });
+    await screen.findByText(/the children/i);
+    await screen.findByText(/the actions/i);
+  });
+});

graylog2-web-interface/src/components/common/Section.tsx

@@ -0,0 +1,57 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * 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
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+
+const Container = styled.div(({ theme }) => css`
+  background-color: ${theme.colors.section.filled.background};
+  border: 1px solid ${theme.colors.section.filled.border};
+  border-radius: 10px;
+  padding: 15px;
+`);
+
+const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+`;
+
+type Props = React.PropsWithChildren<{
+  title: React.ReactNode,
+  actions?: React.ReactNode,
+}>
+
+/**
+ * Simple section component. Currently only a "filled" version exists.
+ */
+const Section = ({ title, actions, children }: Props) => (
+  <Container>
+    <Header>
+      <h2>{title}</h2>
+      {actions && <div>{actions}</div>}
+    </Header>
+    {children}
+  </Container>
+);
+
+Section.defaultProps = {
+  actions: undefined,
+};
+
+export default Section;

graylog2-web-interface/src/components/common/index.tsx

@@ -25,6 +25,7 @@ export { default as Affix } from './Affix';
 export { default as Autocomplete } from './Autocomplete/Autocomplete';
 export { default as BrowserTime } from './BrowserTime';
 export { default as BrandIcon } from './BrandIcon';
+export { default as Card } from './Card';
 export { default as Center } from './Center';
 export { default as Carousel } from 'components/common/carousel/Carousel';
 export { default as ClipboardButton } from './ClipboardButton';
@@ -98,6 +99,7 @@ export { default as ReadOnlyFormGroup } from './ReadOnlyFormGroup';
 export { default as RelativeTime } from './RelativeTime';
 export { default as ScrollButton } from './ScrollButton';
 export { default as SearchForm } from './SearchForm';
+export { default as Section } from './Section';
 export { default as Select } from './Select';
 export { default as SelectPopover } from './SelectPopover';
 export { default as SelectableList } from './SelectableList';