feat: implement size prop on badge component

src/components/Badge/index.d.ts

@@ -5,6 +5,7 @@ export interface BadgeProps extends BaseProps {
     label?: ReactNode;
     title?: string;
     children?: ReactNode;
+    size?: 'small' | 'medium' | 'large';
     variant?:
         | 'default'
         | 'inverse'

src/components/Badge/index.js

@@ -7,14 +7,20 @@ import Content from './content';
  * Badges are labels that hold small amounts of information.
  */
 export default function Badge(props) {
-    const { className, style, label, title, children, variant } = props;
+    const { className, style, label, title, children, variant, size } = props;
 
     if (children === null && label === null) {
         return null;
     }
 
     return (
-        <StyledContainer className={className} style={style} variant={variant} title={title}>
+        <StyledContainer
+            className={className}
+            style={style}
+            variant={variant}
+            title={title}
+            size={size}
+        >
             <Content label={label}>{children}</Content>
         </StyledContainer>
     );
@@ -40,6 +46,9 @@ Badge.propTypes = {
         'success',
         'error',
     ]),
+    /** The size of the badge. Valid values are small, and large.
+     * This value defaults to medium. */
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
     /** A CSS class for the outer element, in addition to the component's base classes. */
     className: PropTypes.string,
     /** An object with custom style applied to the outer element. */
@@ -51,6 +60,7 @@ Badge.defaultProps = {
     title: undefined,
     children: null,
     variant: 'default',
+    size: 'medium',
     className: undefined,
     style: undefined,
 };

src/components/Badge/readme.md

@@ -116,3 +116,17 @@ import { faStar } from '@fortawesome/free-solid-svg-icons';
         </Badge>
     </div>
 ```
+
+# Badges of different sizes
+##### If you need to resize your badge, you can do so using the `size` prop.
+
+```js
+import React from 'react';
+import { Badge } from 'react-rainbow-components';
+
+    <div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
+        <Badge size="small" variant="inverse" title="the badge title" className="rainbow-m-around_medium" label="Badge Small" />
+        <Badge size="medium" variant="inverse" title="the badge title" className="rainbow-m-around_medium" label="Badge Medium" />
+        <Badge size="large" variant="inverse" title="the badge title" className="rainbow-m-around_medium" label="Badge Large" />
+    </div>
+```

src/components/Badge/styled/container.js

@@ -13,18 +13,32 @@ const StyledContainer = attchThemeAttrs(styled.span).attrs(props => {
     justify-content: center;
     align-content: center;
     align-items: center;
-    font-size: 0.75rem;
     line-height: normal;
     text-transform: uppercase;
     letter-spacing: 0.0625em;
-    padding: 0.25rem 0.75rem;
     border-radius: 12rem;
     overflow: hidden;
+    padding: 0.25rem 0.75rem;
+    font-size: 0.75rem;
 
     & + & {
         margin-left: 0.5rem;
     }
 
+    ${props =>
+        props.size === 'large' &&
+        `
+            padding: 0.65rem 0.9rem;
+            font-size: 0.9rem;
+        `};
+
+    ${props =>
+        props.size === 'small' &&
+        `
+            padding: 0.15rem 0.4rem;
+            font-size: 0.7rem;
+        `};
+
     ${props =>
         props.variant === 'lightest' &&
         `