feat: add ValueGroup

Author: Wojciech Krysiak

src/atoms/header.tsx

@@ -103,6 +103,7 @@ H6.defaultProps = {
 
 const CaptionShared = css<TypographyProps & SpaceProps>`
   font-family: ${themeGet('font')};
+  font-weight: ${themeGet('fontWeights', 'normal')};
   ${typography};
   ${space};
 `

src/atoms/label.tsx

@@ -11,7 +11,9 @@ import { cssClass } from '../utils/css-class'
 import themeGet from '../utils/theme-get'
 import { ColorProps } from '../utils/color-props'
 
-const labelVariants = variant<any, VariantType>({
+export type LabelVariantType = VariantType | 'light'
+
+const labelVariants = variant<any, LabelVariantType>({
   variants: {
     primary: {
       color: 'primary100',
@@ -43,6 +45,14 @@ const labelVariants = variant<any, VariantType>({
         fill: 'accent',
       },
     },
+    light: {
+      color: 'grey60',
+      mb: 'sm',
+      fontWeight: 'light',
+      [`& .${cssClass('Icon')} svg`]: {
+        fill: 'grey60',
+      },
+    },
     default: {},
   },
 })
@@ -69,7 +79,7 @@ export type LabelProps = ColorProps & SpaceProps & TypographyProps & {
   /** If label represents disabled field (dimmed version) */
   disabled?: boolean;
   /** Color variant */
-  variant?: VariantType;
+  variant?: LabelVariantType;
 
   /** Label size */
   size?: 'default' | 'lg'
@@ -119,15 +129,15 @@ const setDisabled = ({ disabled, theme }): ReturnType<ThemedCssFunction<DefaultT
  */
 const Label = styled.label<LabelProps>`
   display: ${({ inline }): string => (inline ? 'inline-block' : 'block')};
-  font-family: ${({ theme }): string => theme.font};
+  font-family: ${themeGet('font')};
   font-size: ${(props): string => themeGet('fontSizes', props.size === 'lg' ? 'md' : 'sm')(props)};
-  line-height: ${({ theme }): string => theme.lineHeights.default};
+  line-height: ${themeGet('lineHeights', 'default')};
   margin-bottom: ${({ theme, inline }): string => (inline ? '0' : theme.space.default)};
 
   &:before {
     content: "${({ required }): string => (required ? '*' : '')}";
-    color: ${({ theme }): string => theme.colors.primary100};
-    margin-right: ${({ theme }): string => theme.space.sm};
+    color: ${themeGet('colors', 'primary100')};
+    margin-right: ${themeGet('space', 'sm')};
     display: ${({ required }): string => (required ? 'block-inline' : 'none')};
   }
 

src/atoms/text.tsx

@@ -80,12 +80,12 @@ export type TextProps = TypographyProps & SpaceProps & ColorProps & LayoutProps
  * @section design-system
  */
 const Text = styled.div<TextProps>`
+  ${contentCSS};
   ${typography};
   ${space};
   ${layout};
   ${color};
   ${variants};
-  ${contentCSS};
 `
 
 Text.defaultProps = {

src/index.ts

@@ -161,6 +161,7 @@ export * from './atoms/loader'
 export * from './atoms/placeholder'
 export * from './atoms/tooltip'
 export * from './molecules/form-group/index'
+export * from './molecules/value-group'
 export * from './molecules/date-picker'
 export * from './molecules/drop-zone/index'
 export * from './molecules/rich-text/index'

src/molecules/value-group.stories.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { withKnobs, object } from '../../storybook/node_modules/@storybook/addon-knobs'
+
+import { ValueGroup, Box, CardTitle, Text } from '..'
+import StoryWrapper from '../utils/story-wrapper'
+
+export default {
+  title: 'DesignSystem/Molecules/ValueGroup',
+  decorators: [withKnobs],
+  argTypes: {
+    onClick: { action: 'clicked' },
+  },
+}
+export const Default: React.FC = ({ onClick }) => {
+  const handleClick = (event) => {
+    event.preventDefault()
+    onClick(event)
+  }
+
+  const objects = object('objects', [{
+    label: 'First Name',
+    onClick: handleClick,
+    value: 'Wojtek',
+  }, {
+    label: 'Last Name',
+    onClick: handleClick,
+    value: 'Krysiak',
+  }])
+
+  return (
+    <StoryWrapper label="ValueGroup default settings">
+      <Box>
+        {objects.map((field) => (
+          <ValueGroup key={field.label} {...field} />
+        ))}
+        <ValueGroup label="value with styled children">
+          <CardTitle>With children which are wrapped with CardTitle</CardTitle>
+        </ValueGroup>
+        <ValueGroup label="With Multiline Content">
+          <Box variant="white" border="default">
+            <Text>
+              <h4>I am header</h4>
+              <p>And I am content</p>
+            </Text>
+          </Box>
+        </ValueGroup>
+      </Box>
+    </StoryWrapper>
+  )
+}

src/molecules/value-group.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Box, Label, Text } from '..'
+
+export type ValueGroupProps = {
+  label: string,
+  value?: string,
+  children?: React.ReactNode,
+}
+
+const ValueGroup: React.FC<ValueGroupProps> = (props) => {
+  const { label, value, children } = props
+
+  return (
+    <Box mb="xl">
+      <Label variant="light">{label}</Label>
+      {value ? <Text>{value}</Text> : ''}
+      {children}
+    </Box>
+  )
+}
+
+export {
+  ValueGroup as default,
+  ValueGroup,
+}