@nulogy/components - npm Package Compare versions

Comparing version 0.1.12 to 0.1.13

package.json

 {
   "name": "@nulogy/components",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
@@ -50,3 +50,3 @@ "private": false,
   "devDependencies": {
-    "@nulogy/tokens": "^0.1.12",
+    "@nulogy/tokens": "^0.1.13",
     "@storybook/addon-actions": "^3.4.5",
@@ -85,3 +85,3 @@ "@storybook/addon-links": "^3.4.5",
   },
-  "gitHead": "cce435f6b538bbc8f87f98a076c7c21b77a652d3"
+  "gitHead": "aaaacf412a10103d53bd01eb8b373487b51f75ec"
 }

src/Button/Button.js

 import React from 'react';
 import styled, { css } from 'styled-components';
 import { colour, space, font, radius, shadow } from '@nulogy/tokens';
+import { fontMetrics } from '../utils.js';
 
@@ -74,4 +75,3 @@ const borderWidth = 1;
   large: css`
-    font-size: ${font.size.large}px;
-    line-height: ${lineHeight('regular') / font.size.large};
+    ${fontMetrics('large', 'medium')({theme: {font}})};
     font-weight: ${font.weight.medium};
@@ -82,4 +82,3 @@ padding: ${withoutBorder(space.x2)}px ${space.x3}px;
   medium: css`
-    font-size: ${font.size.small}px;
-    line-height: ${lineHeight('smaller') / font.size.small};
+    ${fontMetrics()({theme: {font}})};
     font-weight: ${font.weight.medium};
@@ -90,4 +89,3 @@ padding: ${withoutBorder(space.x1)}px ${space.x2}px;
   small: css`
-    font-size: ${font.size.smaller}px;
-    line-height: ${lineHeight('smaller') / font.size.smaller};
+    ${fontMetrics('smaller', 'small')({theme: {font}})};
     font-weight: ${font.weight.normal};
@@ -94,0 +92,0 @@ padding: ${smallButtonPaddingY}px ${space.half}px;

src/DataList/DataList.js

@@ -6,2 +6,3 @@ import React from 'react';
 import tokens from '@nulogy/tokens';
+import { labelStyles } from '../Type/Type';
 
@@ -32,3 +33,3 @@ const defaultProps = { theme: tokens };
 List.displayName = 'NDS.DataList.List';
-List.defaultProps = { 
+List.defaultProps = {
   ...defaultProps,
@@ -48,6 +49,3 @@ count: 1,
 export const Key = styled.dt`
-  ${({theme}) => css`
-    font-weight: ${theme.font.weight.bold};
-    position: relative;
-  `}
+  ${labelStyles}
 `;
@@ -61,3 +59,3 @@ Key.displayName = 'NDS.DataList.Key';
   ${({theme}) => css`
-    margin-bottom: ${theme.space.x1}px;
+    margin-bottom: ${theme.space.x2}px;
   `}
@@ -89,3 +87,3 @@ `;
 DataList.displayName = 'NDS.DataList';
-DataList.defaultProps = { 
+DataList.defaultProps = {
   columns: [1, 2, 3],
@@ -101,2 +99,2 @@ };
 }
-export default DataList;
+export default DataList;

src/Tables/Table.js

 import React from 'react';
+import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
-import tokens from '@nulogy/tokens';
+import { tokens } from '@nulogy/tokens';
+import { fontMetrics } from '../utils';
+import { labelStyles } from '../Type/Type';
 import QuietButton from '../Button/QuietButton';
@@ -8,8 +11,5 @@
 
-const lineHeight = name => ({ theme }) => theme.font.lineHeight[name] * theme.font.size.medium;
-
 export const Cell = styled.td`
+  ${fontMetrics()}
   ${ ({ theme }) => css`
-    font-size: ${theme.font.size.small}px;
-    line-height: ${lineHeight('smaller')({ theme }) / theme.font.size.small};
     padding: ${theme.space.x2}px ${theme.space.x1}px;
@@ -62,3 +62,7 @@ vertical-align: top;
 
-export const Row = styled.tr``;
+export const Row = styled.tr`
+  ${ ({ theme }) => css`
+    border-bottom: solid 1px ${theme.colour.blue['300']};
+  `}
+`;
 
@@ -70,6 +74,5 @@ export const Header = styled.thead`
 export const HeaderCell = styled(Cell.withComponent('th'))`
-  ${ ({ theme }) => css`
-    font-weight: bold;
-    vertical-align: bottom;
-  `}
+  ${labelStyles}
+  font-weight: normal;
+  vertical-align: bottom;
 `;
@@ -99,3 +102,3 @@
     background: ${theme.colour.blue[300]};
-    font-size: ${theme.font.size.small}px;
+    font-size: ${theme.font.size.medium}px;
     padding: ${theme.space.half}px ${theme.space.x1}px;
@@ -112,7 +115,2 @@ border-radius: ${theme.radius.small}px;
 export const Body = styled.tbody`
-  ${ ({ theme }) => css`
-    ${Row}:nth-of-type(odd){
-      background-color: ${theme.colour.blue['200']};
-    }
-  `}
 `;
@@ -131,1 +129,34 @@
 Table.defaultProps = defaultProps;
+
+export const DataTable = ({ data, headers }) => (
+  <Table>
+    { headers && 
+    <Header>
+      <Row>
+      {headers.map(header => (
+        <HeaderCell key={`DataTableHeader_${header}`}>
+          {header}
+        </HeaderCell>
+      ))}
+      </Row>
+    </Header>
+    }
+
+    <Body>
+    {data.map(row => (
+      <Row key={`DataTableHeaderRow_${row}`}>
+      {row.map(cell => (
+        <Cell key={`DataTableHeaderCell_${row}_${cell}`}>
+          {cell}
+        </Cell>
+      ))}
+      </Row>
+    ))}
+    </Body>
+  </Table>
+);
+
+DataTable.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.array).isRequired,
+  headers: PropTypes.array
+}

src/Tables/Table.story.js

 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { Table, Cell, ActionCell, Row, CreateRow, Body, Header, HeaderCell, Button, TemporaryTextInput } from './';
+import { DataTable, Table, Cell, ActionCell, Row, CreateRow, Body, Header, HeaderCell, Button, TemporaryTextInput } from './';
 
-storiesOf('Table', module)
+storiesOf('Table/DataTable', module)
+  .add('default', () => (
+    <DataTable 
+      headers={[
+        'Header 1', 
+        'Header 2', 
+        'Header 3'
+      ]} 
+      data={[
+        [1, 2, 3],
+        [11, 22, 33],
+        [111, 222, 333]
+      ]} />
+  ))
+  .add('with no headers', () => (
+    <DataTable 
+      data={[
+        [1, 2, 3],
+        [11, 22, 33],
+        [111, 222, 333]
+      ]} />
+  ));
+
+storiesOf('Table/primitives', module)
   .add('Read Only', () => (
@@ -7,0 +30,0 @@ <Table>

src/Type/Type.js

@@ -63,1 +63,13 @@ import React from 'react';
 SubsectionTitle.defaultProps = { theme: tokens };
+
+export const labelStyles = ({theme}) => css`
+  font-size: ${theme.font.size.small}px;
+  color: ${theme.colour.neutral[600]};
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  line-height: 1.143; // related to https://github.com/nulogy/design-system/pull/43#discussion_r218503006
+`;
+
+export const Label = styled.label`
+  ${labelStyles}
+`;

src/Type/Type.story.js

 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { Text, P, Title, SectionTitle, SubsectionTitle } from './Type';
+import { Text, P, Title, SectionTitle, SubsectionTitle, Label } from './Type';
 
@@ -13,2 +13,3 @@ storiesOf('Type', module)
       <Text>Text component is for inline content.</Text>
+      <Label>Label component is for labeling things.</Label>
     </React.Fragment>
@@ -84,2 +85,9 @@ ))
     </React.Fragment>
+  ))
+  .add('Label', () => (
+    <React.Fragment>
+      <Label>This is a block of text.</Label>
+      <Label>The Label component is for page Labels. It gives you a standard font size and line height.</Label>
+      <Label>Aliquam erat volutpat. Integer elementum orci vestibulum porta venenatis. Phasellus porta quam ligula, eu venenatis nisl rutrum gravida. Aliquam ultricies sollicitudin accumsan. Duis consequat ex sit amet mi laoreet, sed fringilla augue interdum. Vivamus pharetra laoreet gravida. Pellentesque varius vitae erat ullamcorper vestibulum. Nunc ornare lectus risus, eu dapibus nisl iaculis sit amet. Pellentesque aliquet orci mi, quis elementum tellus viverra in. Mauris sit amet mi diam. Cras rhoncus, justo et consectetur tempor, quam odio pulvinar velit, ut vulputate urna mi ut tortor. Quisque ac tortor pretium, volutpat neque sed, molestie mauris. Duis eros nisi, faucibus quis orci sit amet, ornare dignissim purus. Proin eu sem ex.</Label>
+    </React.Fragment>
   ));

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1193251

increased by0.34%

Number of package files

48

increased by2.13%

Lines of code

2715

increased by2.72%

No dependency changes