feat(grid): Add new grid documentation (#2859)

* chore(documentation): grid dockblocks * chore(grids): remove mixins, move deprecated styles to deprecate file and include * feat(grids): Add docblocks part 1 * Continue * chore(grids): Finish documentation * Remove Example wrapper for now * feat(grids): Fix linting errors * Add missing sections, fix build * Remove comment * Add tests * Add tests * Updated documentation text * Update blockquote text * Update snapshot refs * Update headings
salesforce-ux · Dec 12, 2017 · 02854fd · 02854fd
1 parent e2b4fef
commit 02854fd
Show file tree

Hide file tree

Showing 32 changed files with 4,587 additions and 0 deletions.
diff --git a/shared/styles/doc.scss b/shared/styles/doc.scss
@@ -106,6 +106,10 @@ p.doc {
   margin-bottom: 1.5rem;
 }
 
+p.doc:first-child {
+  margin-top: 0;
+}
+
 a.doc {
   color: #0070d2;
 }

diff --git a/test/__tests__/__snapshots__/Grid_Column_Gutters_2_col_basic.json b/test/__tests__/__snapshots__/Grid_Column_Gutters_2_col_basic.json
diff --git a/test/__tests__/__snapshots__/Grid_Column_Gutters_2_col_pull_padded.json b/test/__tests__/__snapshots__/Grid_Column_Gutters_2_col_pull_padded.json
diff --git a/test/__tests__/__snapshots__/Grid_Column_Gutters_2_col_utilities.json b/test/__tests__/__snapshots__/Grid_Column_Gutters_2_col_utilities.json
diff --git a/test/__tests__/__snapshots__/Grid_Column_Nesting.json b/test/__tests__/__snapshots__/Grid_Column_Nesting.json
diff --git a/test/__tests__/__snapshots__/Grid_Column_Reordering_3_col.json b/test/__tests__/__snapshots__/Grid_Column_Reordering_3_col.json
diff --git a/test/__tests__/__snapshots__/Grid_Column_Width_2_col.json b/test/__tests__/__snapshots__/Grid_Column_Width_2_col.json
diff --git a/test/__tests__/__snapshots__/Grid_Column_Width_all_fraction_options.json b/test/__tests__/__snapshots__/Grid_Column_Width_all_fraction_options.json
diff --git a/test/__tests__/__snapshots__/Grid_Column_Width_all_options.json b/test/__tests__/__snapshots__/Grid_Column_Width_all_options.json
diff --git a/test/__tests__/__snapshots__/Grid_Column_Wrapping_3_col.json b/test/__tests__/__snapshots__/Grid_Column_Wrapping_3_col.json
diff --git a/test/__tests__/__snapshots__/Grid_Horizontal_Align_center_basic.json b/test/__tests__/__snapshots__/Grid_Horizontal_Align_center_basic.json
diff --git a/test/__tests__/__snapshots__/Grid_Horizontal_Align_center_variable.json b/test/__tests__/__snapshots__/Grid_Horizontal_Align_center_variable.json
diff --git a/test/__tests__/__snapshots__/Grid_Horizontal_Align_end.json b/test/__tests__/__snapshots__/Grid_Horizontal_Align_end.json
diff --git a/test/__tests__/__snapshots__/Grid_Horizontal_Align_spaced.json b/test/__tests__/__snapshots__/Grid_Horizontal_Align_spaced.json
diff --git a/test/__tests__/__snapshots__/Grid_Horizontal_Align_spread.json b/test/__tests__/__snapshots__/Grid_Horizontal_Align_spread.json
diff --git a/test/__tests__/__snapshots__/Grid_Horizontal_Reversed.json b/test/__tests__/__snapshots__/Grid_Horizontal_Reversed.json
diff --git a/test/__tests__/__snapshots__/Grid_Intro_12_col.json b/test/__tests__/__snapshots__/Grid_Intro_12_col.json
diff --git a/test/__tests__/__snapshots__/Grid_Intro_3_col_with_gutters.json b/test/__tests__/__snapshots__/Grid_Intro_3_col_with_gutters.json
diff --git a/test/__tests__/__snapshots__/Grid_Intro_4_col_with_gutters.json b/test/__tests__/__snapshots__/Grid_Intro_4_col_with_gutters.json
diff --git a/test/__tests__/__snapshots__/Grid_Responsive_2_col_mobile_desktop.json b/test/__tests__/__snapshots__/Grid_Responsive_2_col_mobile_desktop.json
diff --git a/test/__tests__/__snapshots__/Grid_Responsive_2_col_mobile_tablet_desktop.json b/test/__tests__/__snapshots__/Grid_Responsive_2_col_mobile_tablet_desktop.json
diff --git a/test/__tests__/__snapshots__/Grid_Responsive_Reordering_2_col_mobile_desktop.json b/test/__tests__/__snapshots__/Grid_Responsive_Reordering_2_col_mobile_desktop.json
diff --git a/test/__tests__/__snapshots__/Grid_Vertical_Align.json b/test/__tests__/__snapshots__/Grid_Vertical_Align.json
diff --git a/test/__tests__/__snapshots__/Grid_Vertical_Align_absolute_center.json b/test/__tests__/__snapshots__/Grid_Vertical_Align_absolute_center.json
diff --git a/test/__tests__/__snapshots__/Grid_Vertical_Align_center.json b/test/__tests__/__snapshots__/Grid_Vertical_Align_center.json
diff --git a/test/__tests__/__snapshots__/Grid_Vertical_Align_end.json b/test/__tests__/__snapshots__/Grid_Vertical_Align_end.json
diff --git a/test/__tests__/__snapshots__/Grid_Vertical_Align_inidividual.json b/test/__tests__/__snapshots__/Grid_Vertical_Align_inidividual.json
diff --git a/test/__tests__/__snapshots__/Grid_Vertical_Align_reversed.json b/test/__tests__/__snapshots__/Grid_Vertical_Align_reversed.json
diff --git a/test/__tests__/__snapshots__/Grid_Vertical_Align_start.json b/test/__tests__/__snapshots__/Grid_Vertical_Align_start.json
diff --git a/ui/utilities/grid/docs.mdx b/ui/utilities/grid/docs.mdx
diff --git a/ui/utilities/grid/docs/Grid.jsx b/ui/utilities/grid/docs/Grid.jsx
@@ -0,0 +1,46 @@
+// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
+
+import React, { Component } from 'react';
+import CodeView from '../../../../shared/components/CodeView';
+import style from './Grid.scss';
+import classNames from 'classnames';
+
+export const Column = props => {
+  let count = props.count + 1;
+  return (
+    <div className={classNames('slds-col', props.className)}>
+      {props.count >= 0 ? <span>{count}</span> : <span>{props.children}</span>}
+    </div>
+  );
+};
+
+class Grid extends Component {
+  render() {
+    const children = [];
+    for (var i = 0; i < this.props.columns; i += 1) {
+      children.push({ key: i, count: i });
+    }
+    return (
+      <div
+        className={classNames(
+          'simple-grid',
+          this.props.small && 'simple-grid_small'
+        )}
+      >
+        <CodeView>
+          <div
+            className={classNames('slds-grid', this.props.className)}
+            style={this.props.style}
+          >
+            {this.props.columns
+              ? children.map(props => <Column key={props.key} {...props} />)
+              : this.props.children}
+          </div>
+        </CodeView>
+      </div>
+    );
+  }
+}
+
+export default Grid;
diff --git a/ui/utilities/grid/docs/Grid.scss b/ui/utilities/grid/docs/Grid.scss
@@ -0,0 +1,39 @@
+// stylelint-disable selector-class-pattern
+.simple-grid .slds-grid {
+  height: 8.75rem;
+  margin-bottom: 1rem;
+}
+
+.simple-grid_small .slds-grid {
+  height: auto;
+}
+
+.simple-grid .slds-grid > .slds-grid {
+  height: auto;
+  margin-bottom: 0;
+}
+
+.simple-grid .slds-col {
+  display: inline-flex;
+  background: #54698d;
+  color: #fff;
+  text-align: center;
+  background-clip: content-box;
+  border: 1px solid #fff;
+  border-radius: 0;
+}
+
+.simple-grid .slds-col > span {
+  align-self: center;
+  margin: auto;
+  font-size: 1.575rem;
+  padding: 0.5rem;
+}
+
+.simple-grid .slds-wrap {
+  align-items: stretch;
+}
+
+.simple-grid__buttons {
+  margin: auto;
+}