fix: support more sizes link and fix minor issues with arg types

atoms/Link/Link.js

@@ -7,10 +7,10 @@ import withStyles from '../../hocs/withStyles'
 
 import Paragraph from '../Paragraph'
 
-export const Link = ({ children, color, getStyles }) => {
+export const Link = ({ children, size, color, getStyles }) => {
   return (
     <a className={getStyles('link', ['color'])}>
-      <Paragraph color={color} weight="semibold" isInline>
+      <Paragraph size={size} color={color} weight="semibold" isInline>
         {children}
       </Paragraph>
     </a>
@@ -21,11 +21,13 @@ Link.propTypes = {
   children: PropTypes.node.isRequired,
   getStyles: PropTypes.func.isRequired,
   color: PropTypes.oneOf(options.colors),
+  size: PropTypes.oneOf(options.sizes),
 }
 
 Link.defaultProps = {
   getStyles: () => {},
   color: 'primary',
+  size: 'md',
 }
 
 export default withStyles(styles)(Link)

atoms/Link/Link.stories.js

@@ -16,10 +16,15 @@ export default {
     children: 'Mouths Muil',
   },
   argTypes: {
-    colors: getOptionsArgTypes(options.colors),
+    color: getOptionsArgTypes(options.colors),
+    size: getOptionsArgTypes(options.sizes),
   },
 }
 
 export const Default = Template.bind({})
+
 export const Colors = ListTemplate.bind({})
 Colors.args = { items: options.colors.map((color) => ({ color })) }
+
+export const Sizes = ListTemplate.bind({})
+Sizes.args = { items: options.sizes.map((size) => ({ size })) }

atoms/Link/constants.js

@@ -1 +1,5 @@
-export const options = { colors: ['primary', 'tertiary'] }
+import { options as paragraphOptions } from '../Paragraph/constants'
+export const options = {
+  colors: ['primary', 'tertiary'],
+  sizes: paragraphOptions.sizes,
+}

layout/Container/Container.module.css

@@ -5,7 +5,7 @@
   height: 100%;
   flex: auto;
   justify-content: center;
-  padding: 40px 30px 20px;
+  padding: 20px 15px 20px;
   margin: 0 auto;
 }
 

molecules/AddButton/constants.js

@@ -1,6 +1,6 @@
-import { options as optionsIcons } from '../../atoms/Icon'
+import { options as iconOptions } from '../../atoms/Icon'
 
 export const options = {
   types: ['primary', 'secondary'],
-  icons: optionsIcons.names,
+  icons: iconOptions.names,
 }

molecules/Error/Error.stories.js

@@ -1,6 +1,6 @@
-import { Error, styles, options } from '.'
+import { Error, styles } from '.'
 
-import { getTemplate, getOptionsArgTypes } from '../../helpers/storybook'
+import { getTemplate } from '../../helpers/storybook'
 
 const Template = getTemplate(Error, styles)
 
@@ -11,9 +11,6 @@ export default {
     children:
       "Meets counts consumed 200 Meriadoc tombs rabble noble crash thread. Another kind Imladris. Dump each Kingdom mere other's by blame ugly sending bestow mist adventure.",
   },
-  argTypes: {
-    types: getOptionsArgTypes(options.types),
-  },
 }
 
 export const Default = Template.bind({})

molecules/Error/index.js

@@ -1,3 +1,2 @@
 export { default, Error } from './Error'
-export { options } from './constants'
 export { default as styles } from './Error.module.css'

molecules/Modal/Modal.module.css

@@ -1,5 +1,5 @@
 .modal {
-  position: absolute;
+  position: fixed;
   z-index: var(--z-index-50);
   top: 0;
   right: 0;

molecules/Modal/Modal.stories.js

@@ -20,7 +20,7 @@ export default {
       "Successful boar world's somebody herbs helpful spiders Samwise Gamgee helps unlost circles guard? Investment Thofin folly? Troublemaker minutes moldy Rivendell eve late traveling around crescent fault never naught",
   },
   argTypes: {
-    types: getOptionsArgTypes(options.types),
+    type: getOptionsArgTypes(options.types),
     onClose: { action: 'clicked' },
   },
   parameters: { __sb: { fd: 'row' } },

styles/tokens.css

@@ -268,11 +268,11 @@
   --font-family-mono: 'Roboto Mono', 'Courier New', monospace;
 
   --font-size-base: 10px;
-  --font-size-xs: 1.1rem;
-  --font-size-sm: 1.3rem;
-  --font-size-md: 1.5rem;
+  --font-size-xs: 1.2rem;
+  --font-size-sm: 1.4rem;
+  --font-size-md: 1.6rem;
   --font-size-lg: 1.8rem;
-  --font-size-xl: 2.1rem;
+  --font-size-xl: 2.2rem;
   --font-size-2xl: 6rem;
 
   --font-weight-hairline: 100;
@@ -360,7 +360,7 @@
   --input-max-width: 400px;
   --input-background: #fff;
   --input-border-radius: 30px;
-  --input-font-size: 1.3rem;
+  --input-font-size: 1.4rem;
 
   --picture-border: 1px solid #7e858c;
 

tokens/index.js

@@ -319,11 +319,11 @@ const choices = {
   },
   fontSize: {
     base: '10px',
-    xs: '1.1rem',
-    sm: '1.3rem',
-    md: '1.5rem',
+    xs: '1.2rem',
+    sm: '1.4rem',
+    md: '1.6rem',
     lg: '1.8rem',
-    xl: '2.1rem',
+    xl: '2.2rem',
     '2xl': '6rem',
   },
   fontWeight: {