chore: update radio button and typography (#441)

* chore(radio button): add support for alignItems prop

* chore(typography): add support for code format

* v2.9.6

Author: burbuli8ra

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "2.9.5",
+  "version": "2.9.6",
   "description": "netdata UI kit",
   "main": "./lib/index.js",
   "files": [

src/components/radio-button/index.js

@@ -14,13 +14,14 @@ const radioButtonStyles = {
 }
 
 const RadioButton = ({
-  label,
+  alignItems = "center",
+  alignSelf,
   checked,
-  disabled,
   children,
-  margin,
-  alignSelf,
+  disabled,
   iconProps,
+  label,
+  margin,
   ...rest
 }) => {
   const radioStatus =
@@ -39,7 +40,7 @@ const RadioButton = ({
   const showIcon = radioStatus === "checkedDisabled" || radioStatus === "checked"
 
   return (
-    <Container disabled={disabled} margin={margin} alignSelf={alignSelf}>
+    <Container alignItems={alignItems} alignSelf={alignSelf} disabled={disabled} margin={margin}>
       <Input type="radio" disabled={disabled} checked={checked} {...rest} />
       <IconContainer
         background={radioStyles.containerColor}

src/components/radio-button/styled.js

@@ -1,6 +1,7 @@
 import styled from "styled-components"
 import { getColor } from "src/theme/utils"
 import margin from "src/mixins/margin"
+import alignItems from "src/components/templates/mixins/alignItems"
 import alignSelf from "src/mixins/alignSelf"
 import { Icon } from "src/components/icon"
 import disabled from "./mixins/disabled"
@@ -20,6 +21,7 @@ export const Container = styled.label`
   display: flex;
   flex-direction: row;
   align-items: center;
+  ${alignItems}
   ${alignSelf}
 
   ${margin}

src/components/typography/typography.js

@@ -18,9 +18,18 @@ const makeFontWeight =
   ({ strong = defaultStrong }) =>
     `font-weight: ${strong ? "bold" : "normal"};`
 export const fontColor = ({ theme, color = "text" }) => `color: ${getColor(color)({ theme })};`
+export const fontCode = ({ background = "text", code, color = "elementBackground", theme }) =>
+  code &&
+  `
+  background-color: ${getColor(background)({ theme })};
+  border-radius: 4px;
+  color: ${getColor(color)({ theme })};
+  padding: 0 6px;
+  `
 
 const typography = css`
   ${fontColor}
+  ${fontCode}
   ${alignSelf}
   ${textAlign}
   ${textDecoration}