feat: add settings components [LW-10713]

Author: DominikGuzei

src/design-system/settings/setting.component.tsx

@@ -0,0 +1,50 @@
+import React, { ReactNode } from 'react';
+
+import { Box } from '../box';
+import { Flex } from '../flex';
+import { Text } from '../text';
+
+import * as styles from './setting.css';
+
+interface SettingsItemProps {
+  addon?: ReactNode;
+  description: ReactNode;
+  onClick?: () => void;
+  testId?: string;
+  title?: ReactNode | string;
+}
+
+export const Setting = ({
+  description,
+  addon,
+  onClick,
+  testId = 'setting',
+  title,
+}: SettingsItemProps): React.ReactElement => (
+  <Box mb="$32" className={styles.root}>
+    <div className={styles.separator} />
+    <Box
+      pt="$32"
+      pb="$32"
+      pl="$16"
+      pr="$16"
+      className={styles.content}
+      onClick={onClick}
+      data-testid={testId}
+    >
+      {title ? (
+        <Box>
+          <Text.Body.Large weight="$semibold" data-testid={`${testId}-title`}>
+            {title}
+          </Text.Body.Large>
+        </Box>
+      ) : null}
+      <Flex justifyContent="space-between">
+        <Text.Body.Normal data-testid={`${testId}-description`}>
+          {description}
+        </Text.Body.Normal>
+        <div data-testid={`${testId}-addon`}>{addon}</div>
+      </Flex>
+    </Box>
+  </Box>
+);

src/design-system/settings/setting.css.ts

@@ -0,0 +1,27 @@
+import { style, vars } from '../../design-tokens';
+
+export const root = style({});
+
+export const separator = style({
+  width: '100%',
+  height: 1,
+  background: vars.colors.$settings_item_separator_color,
+  selectors: {
+    [`${root}:first-of-type &`]: {
+      background: 'none',
+    },
+    [`${root}:hover &`]: {
+      background: 'none',
+    },
+  },
+});
+
+export const content = style({
+  selectors: {
+    '&:hover': {
+      background: vars.colors.$settings_item_hover_bgColor,
+      borderRadius: vars.spacing.$16,
+      cursor: 'pointer',
+    },
+  },
+});

src/design-system/settings/settings-section.component.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Box } from '../box';
+import { Text } from '../text';
+
+import * as styles from './settings-section.css';
+
+interface SettingsCardProps {
+  title: string;
+  testId?: string;
+  children: React.ReactNode;
+}
+
+export const SettingsSection = ({
+  children,
+  title,
+  testId = 'settings-section',
+}: SettingsCardProps): React.ReactElement => (
+  <div data-testid="settings-card" className={styles.root}>
+    <Box pl="$16" mb="$16">
+      <Text.SubHeading data-testid={`${testId}-heading`}>
+        {title}
+      </Text.SubHeading>
+    </Box>
+    <div>{children}</div>
+  </div>
+);

src/design-system/settings/settings-section.css.ts

@@ -0,0 +1,8 @@
+import { style, vars } from '../../design-tokens';
+
+export const root = style([
+  {
+    width: vars.spacing.$fill,
+    marginBottom: vars.spacing.$40,
+  },
+]);

src/design-system/settings/settings.stories.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { action } from '@storybook/addon-actions';
+import type { Meta } from '@storybook/react';
+
+import * as Button from '../buttons/';
+import { page, Section, Variants } from '../decorators';
+import { Flex } from '../flex';
+import { Grid, Cell } from '../grid';
+
+import { Setting } from './setting.component';
+import { SettingsSection } from './settings-section.component';
+
+export default {
+  title: 'Settings/Overview',
+
+  decorators: [
+    page({
+      title: 'Settings Components',
+      subtitle:
+        'These components can be used to render the sections and items on a settings page.',
+    }),
+  ],
+} as Meta;
+
+export const Overview = (): React.JSX.Element => (
+  <div id="storybook">
+    <Grid columns="$1">
+      <Cell>
+        <Section title="Usage Example">
+          <Variants.Table>
+            <Variants.Row>
+              <Variants.Cell>
+                <Flex justifyContent="center" w="$fill">
+                  <SettingsSection title="Example Setting">
+                    <Setting
+                      description="this is an example of a first setting"
+                      title="First Setting"
+                      onClick={action('first setting clicked')}
+                    />
+                    <Setting
+                      description="this is an example of a second setting"
+                      title="Second Setting"
+                      onClick={action('second setting clicked')}
+                      addon={<Button.CallToAction label="test addon" />}
+                    />
+                  </SettingsSection>
+                </Flex>
+              </Variants.Cell>
+            </Variants.Row>
+          </Variants.Table>
+        </Section>
+      </Cell>
+    </Grid>
+  </div>
+);

src/design-tokens/colors.data.ts

@@ -295,6 +295,9 @@ export const colors = {
   $address_tag_own_bgColor: '',
   $address_tag_foreign_color: '',
   $address_tag_foreign_bgColor: '',
+
+  $settings_item_separator_color: '',
+  $settings_item_hover_bgColor: '',
 };
 
 export type Colors = typeof colors;

src/design-tokens/theme/dark-theme.css.ts

@@ -394,6 +394,9 @@ const colors: Colors = {
     darkColorScheme.$primary_accent_purple,
     0.1,
   ),
+
+  $settings_item_separator_color: darkColorScheme.$primary_mid_grey,
+  $settings_item_hover_bgColor: darkColorScheme.$primary_mid_grey,
 };
 
 const elevation: Elevation = {

src/design-tokens/theme/light-theme.css.ts

@@ -422,6 +422,9 @@ const colors: Colors = {
     lightColorScheme.$primary_accent_purple,
     0.1,
   ),
+
+  $settings_item_separator_color: lightColorScheme.$primary_light_grey_plus,
+  $settings_item_hover_bgColor: lightColorScheme.$primary_light_grey,
 };
 
 export const elevation: Elevation = {