feat: use font size from theme in Description component (#298)

* feat: let descriptions use theme font size

* refactor: bold font weight

---------

Co-authored-by: Michael Adlfinger <{ID}+{username}@users.noreply.github.com>

Author: mic-web

src/Descriptions/index.tsx

@@ -2,6 +2,23 @@ import {
   Descriptions as AntdDescriptions,
   DescriptionsProps as AntdDescriptionsProps,
 } from 'antd';
+import styled from 'styled-components';
 
-export const Descriptions = AntdDescriptions;
+import { fontSizeFromTheme } from '../styled-utils';
+
+const StyledDescriptions = styled(AntdDescriptions)`
+  .mll-ant-descriptions-header {
+    margin-bottom: 4px;
+  }
+  .mll-ant-descriptions-title {
+    font-size: calc(${fontSizeFromTheme} + 1px);
+    font-weight: bold;
+  }
+  .mll-ant-descriptions-item-label,
+  .mll-ant-descriptions-item-content {
+    font-size: ${fontSizeFromTheme};
+  }
+`;
+
+export const Descriptions: typeof AntdDescriptions = StyledDescriptions;
 export type DescriptionsProps = AntdDescriptionsProps;

src/Provider/index.stories.tsx

@@ -23,6 +23,7 @@ import {
   Default as DefaultCollapseStory,
   Single as SingleCollapseStory,
 } from '../Collapse/index.stories';
+import { Default as DescriptionsStory } from '../Descriptions/index.stories';
 import { Form } from '../Form';
 import {
   TextArea as TextAreaStory,
@@ -47,17 +48,16 @@ import { Provider } from '.';
 
 export default {
   title: 'Provider',
+  args: {
+    size: 'small',
+    fontSize: '11px',
+  },
   argTypes: {
     size: {
       control: {
         type: 'select',
-        options: ['small', 'middle', 'large', undefined],
-        defaultValue: 'small',
       },
-    },
-    fontSize: {
-      control: { type: 'text' },
-      defaultValue: '11px',
+      options: ['small', 'middle', 'large', undefined],
     },
   },
 };
@@ -216,6 +216,7 @@ function SupportedComponents() {
       <CardsGridStory />
       <CardMetaStory />
       <StepsStory />
+      <DescriptionsStory />
     </Space>
   );
 }