Merge pull request #426 from vtfk/chips

Chips

src/index.js

@@ -2,6 +2,7 @@ export * from './ui/BaseStyle'
 export * from './ui/Button'
 export * from './ui/CardLink'
 export * from './ui/Checkbox'
+export * from './ui/Chip'
 export * from './ui/Datepicker'
 export * from './ui/Icon'
 export * from './ui/IconDropdownNav'

src/ui/Chip/Chip.stories.js

@@ -0,0 +1,174 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { getConfig } from '../../../scripts/storybook/storyConfig'
+import { withKnobs, select } from '@storybook/addon-knobs'
+
+import { Chip, types } from '.'
+import { Icon } from '../Icon'
+
+export default getConfig({
+  title: 'Chip',
+  component: Chip,
+  decorators: [withKnobs]
+})
+
+function Table ({ chips }) {
+  return (
+    <table style={{ border: '1px solid grey' }}>
+      <thead>
+        <tr>
+          <th style={{ border: '1px solid grey' }}>Navn</th>
+          <th style={{ border: '1px solid grey' }}>Alder</th>
+        </tr>
+      </thead>
+      <tbody>
+        {
+          chips && Array.isArray(chips) && chips.map((chip, index) => {
+            return (
+              <tr key={index}>
+                <td style={{ border: '1px solid grey' }}>Turid Laila {chip}</td>
+                <td style={{ border: '1px solid grey' }}>168</td>
+              </tr>
+            )
+          })
+        }
+      </tbody>
+    </table>
+  )
+}
+
+export function Information () {
+  return (
+    <Table chips={[
+      <Chip
+        key='1'
+        message='information'
+        type='information'
+      />
+    ]}
+    />
+  )
+}
+
+export function Success () {
+  return (
+    <Table chips={[
+      <Chip
+        key='1'
+        message='success'
+        type='success'
+      />,
+      <Chip
+        key='2'
+        icon={<Icon name='check' size='small' />}
+        message='success'
+        type='success'
+      />
+    ]}
+    />
+  )
+}
+
+export function Warning () {
+  return (
+    <Table chips={[
+      <Chip
+        key='1'
+        message='warning'
+        type='warning'
+      />,
+      <Chip
+        key='2'
+        icon={<Icon name='warning' size='small' />}
+        message='warning'
+        type='warning'
+      />
+    ]}
+    />
+  )
+}
+
+export function Error () {
+  return (
+    <Table chips={[
+      <Chip
+        key='1'
+        message='error'
+        type='error'
+      />,
+      <Chip
+        key='2'
+        icon={<Icon name='error' size='small' />}
+        message='error'
+        type='error'
+      />
+    ]}
+    />
+  )
+}
+
+export function Styles () {
+  return (
+    <div>
+      <h1>style</h1>
+      <Table chips={[
+        <Chip
+          key='1'
+          message='no style'
+          type={select('type', types, 'information')}
+        />,
+        <Chip
+          key='2'
+          message='bold'
+          style='bold'
+          type={select('type', types, 'information')}
+        />,
+        <Chip
+          key='3'
+          message="['bold', 'italic']"
+          style={['bold', 'italic']}
+          type={select('type', types, 'information')}
+        />,
+        <Chip
+          key='4'
+          message="['bold', 'uppercase', 'underline']"
+          style={['bold', 'uppercase', 'underline']}
+          type={select('type', types, 'information')}
+        />
+      ]}
+      />
+
+      <h1>fontSize</h1>
+      <Table chips={[
+        <Chip
+          key='1'
+          message='default (0.8rem)'
+          type={select('type', types, 'information')}
+        />,
+        <Chip
+          key='2'
+          fontSize='2rem'
+          message='2rem'
+          type={select('type', types, 'information')}
+        />,
+        <Chip
+          key='3'
+          fontSize='16px'
+          message='16px'
+          type={select('type', types, 'information')}
+        />,
+        <Chip
+          key='4'
+          fontSize='200%'
+          message='200%'
+          type={select('type', types, 'information')}
+        />
+      ]}
+      />
+    </div>
+  )
+}
+
+Table.propTypes = {
+  chips: PropTypes.arrayOf(PropTypes.object)
+}

src/ui/Chip/index.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import './styles.scss'
+
+export const types = [
+  'error',
+  'information',
+  'success',
+  'warning'
+]
+
+export function Chip ({ fontSize, icon, message, type, style, ...props }) {
+  const getStyle = value => {
+    if (!value) return undefined
+    else if (typeof value === 'string') return value
+    else if (Array.isArray(value)) return value.join(' ')
+  }
+
+  return (
+    <div className={`chip ${type}`} {...props}>
+      {
+        icon &&
+          <div className='chip-container'>
+            <div className='chip-icon'>{icon}</div>
+            <div className={`chip-message${style ? ` ${getStyle(style)}` : ''}`} style={{ fontSize }}>{message}</div>
+          </div>
+      }
+
+      {
+        !icon && <div className={`chip-message${style ? ` ${getStyle(style)}` : ''}`} style={{ fontSize }}>{message}</div>
+      }
+    </div>
+  )
+}
+
+Chip.propTypes = {
+  fontSize: PropTypes.any,
+  icon: PropTypes.object,
+  message: PropTypes.string.isRequired,
+  style: PropTypes.oneOf([
+    'bold',
+    'italic',
+    'lowercase',
+    'uppercase',
+    'overline',
+    'striketrough',
+    'underline'
+  ]),
+  type: PropTypes.oneOf(types).isRequired
+}
+
+Chip.defaultProps = {
+  fontSize: '0.8rem'
+}

src/ui/Chip/styles.scss

@@ -0,0 +1,59 @@
+.chip {
+  display: inline-block;
+  padding: 0.3rem 0.6rem;
+  border-radius: 1rem;
+
+  &.error {
+    background-color: red;
+    color: white;
+    fill: white;
+  }
+
+  &.information {
+    background-color: #f1f1f1;
+  }
+
+  &.success {
+    background-color: lightgreen;
+  }
+
+  &.warning {
+    background-color: yellow;
+  }
+
+  .chip-container {
+    display: flex;
+    gap: 0.1rem;
+    align-items: center;
+  }
+
+  .chip-message {
+    &.bold {
+      font-weight: bold;
+    }
+
+    &.italic {
+      font-style: italic;
+    }
+
+    &.lowercase {
+      text-transform: lowercase;
+    }
+
+    &.uppercase {
+      text-transform: uppercase;
+    }
+
+    &.overline {
+      text-decoration: overline;
+    }
+
+    &.striketrough {
+      text-decoration: line-through;
+    }
+
+    &.underline {
+      text-decoration: underline;
+    }
+  }
+}