Reduce the thickness of the Hr component

.changeset/seven-radios-help.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Reduced the thickness of the Hr (horizontal rule) component.

packages/circuit-ui/components/Hr/Hr.docs.mdx

@@ -1,19 +1,19 @@
 import { Status, Props, Story } from '../../../../.storybook/components';
 
-# HR
+# Hr
 
 <Status.Stable />
 
-HR provides a visual line that separates content into sections
+A horizontal rule visually and semantically separates content into sections.
 
 <Story id="components-hr--base" />
 <Props />
 
 ## When to use it
 
-Use it when you need to separate different sections of a certain content within a body text or a list of data within a card.
+Use it when you need to separate different sections of content within body copy or a list of data within a card.
 
 ## Usage guidelines
 
-- **Do** proper space the HR from the sections to make sure the division is clear
-- **Do not** use HR to separate totally different content, it is used to break sections on a related content
+- **Do** properly space the HR from the sections to make sure the division is clear
+- **Do not** use HR to separate totally different content, it is used to break sections of related content

packages/circuit-ui/components/Hr/Hr.tsx

@@ -21,12 +21,13 @@ const baseStyles = ({ theme }: StyleProps) => css`
   label: hr;
   display: block;
   width: 100%;
-  border: 1px solid ${theme.colors.n300};
+  border: 0;
+  border-top: 1px solid ${theme.colors.n300};
   margin-top: ${theme.spacings.mega};
   margin-bottom: ${theme.spacings.mega};
 `;
 
 /**
- * A horizontal rule to visually and semantically separate text.
+ * A horizontal rule to visually and semantically separate content.
  */
 export const Hr = styled('hr')<NoTheme>(baseStyles);

packages/circuit-ui/components/Hr/__snapshots__/Hr.spec.tsx.snap

@@ -4,7 +4,8 @@ exports[`Hr should render with default styles 1`] = `
 .circuit-0 {
   display: block;
   width: 100%;
-  border: 1px solid #CCC;
+  border: 0;
+  border-top: 1px solid #CCC;
   margin-top: 16px;
   margin-bottom: 16px;
 }

packages/circuit-ui/components/Sidebar/components/Separator/__snapshots__/Separator.spec.js.snap

@@ -4,7 +4,8 @@ exports[`Separator should render with default styles 1`] = `
 .circuit-0 {
   display: block;
   width: 100%;
-  border: 1px solid #CCC;
+  border: 0;
+  border-top: 1px solid #CCC;
   margin-top: 16px;
   margin-bottom: 16px;
   border: 1px solid #666;