Extend box and update depencies (#23)

* add styles and box superset * update depencies
centrifuge · Apr 8, 2019 · 19d580b · 19d580b
1 parent fa50644
commit 19d580b
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 34 deletions.
diff --git a/.storybook/src/components/section.js b/.storybook/src/components/section.js
@@ -12,7 +12,10 @@ storiesOf("3.Components | Section", module).add("default", () => {
     render() {
       return (
         <AxisTheme>
-          <Section title="Testing Section title" optional={{text:"toggle section"}}>
+          <Section
+            title="Testing Section title"
+            optional={{ text: "toggle section" }}
+          >
             <Paragraph>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
               pellentesque, arcu vitae maximus pharetra, diam nulla porttitor

diff --git a/.storybook/src/superset/box.js b/.storybook/src/superset/box.js
@@ -0,0 +1,27 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { AxisTheme } from "../../../packages/theme/src/";
+import {Box, Heading} from "grommet";
+
+storiesOf("2.Superset | Box", module).add("responsiveChildren", () => (
+  <AxisTheme>
+      <>
+          <Heading level="4"> responsiveChildren = false </Heading>
+          <Box width="xlarge" border="small" direction="rows"  pad="medium">
+              <Box background="accent-1" pad="medium"></Box>
+              <Box background="accent-2"pad="medium"></Box>
+              <Box background="accent-3" pad="medium"></Box>
+              <Box background="accent-4" pad="medium"></Box>
+          </Box>
+          <Heading level="4">responsiveChildren = true</Heading>
+          <Box width="xlarge" border="small" direction="rows" responsiveChildren  pad="medium">
+              <Box background="accent-1" pad="medium"></Box>
+              <Box background="accent-2"pad="medium"></Box>
+              <Box background="accent-3" pad="medium"></Box>
+              <Box background="accent-4" pad="medium"></Box>
+          </Box>
+
+
+      </>
+  </AxisTheme>
+));
diff --git a/.storybook/src/theme/grommet.js b/.storybook/src/theme/grommet.js
@@ -121,6 +121,13 @@ class Components extends Component {
         <FormField label="FormField">
           <TextInput placeholder="TextInput" />
         </FormField>
+        <FormField label="Form field Select">
+          <Select
+              placeholder="Select"
+              options={["One", "Two"]}
+              onChange={() => {}}
+          />
+        </FormField>
       </Box>,
       <Box key="time" gap="medium">
         <Calendar size="small" />

diff --git a/package.json b/package.json
@@ -47,10 +47,11 @@
     "babel-plugin-styled-components": "^1.10.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-react-app": "^7.0.2",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.9.1",
     "glob-loader": "^0.3.0",
-    "grommet": "^2.5.5",
+    "grommet": "^2.6.5",
     "jest": "^24.1.0",
     "lerna": "^3.13.1",
     "react": "^16.8.3",
@@ -107,6 +108,7 @@
   },
   "dependencies": {
     "@centrifuge/axis-modal": "file:packages/modal",
-    "@centrifuge/axis-theme": "file:packages/theme"
+    "@centrifuge/axis-theme": "file:packages/theme",
+    "@centrifuge/axis-section": "file:packages/section"
   }
 }
diff --git a/packages/axis-sample-package/package.json b/packages/axis-sample-package/package.json
@@ -27,7 +27,7 @@
     "url": "https://github.com/centrifuge/axis/issues"
   },
   "peerDependencies": {
-    "grommet": "^2.5.5",
+    "grommet": "^2.6.5",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "styled-components": "^4.1.3"
@@ -40,7 +40,7 @@
     "babel-plugin-styled-components": "^1.10.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-react-app": "^7.0.0",
+    "babel-preset-react-app": "^7.0.2",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.9.1",
     "jest": "^24.1.0",
@@ -51,8 +51,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-progress": "^1.0.0",
     "rollup-plugin-url": "^2.2.0",
-    "styled-components": "^4.1.3",
-    "styled-icons": "^6.7.0"
+    "styled-components": "^4.1.3"
   },
   "gitHead": "ef53db97aa8cc0b402b3544a731dc10c9ff12641"
 }
diff --git a/packages/modal/package.json b/packages/modal/package.json
@@ -27,7 +27,7 @@
     "url": "https://github.com/centrifuge/axis/issues"
   },
   "peerDependencies": {
-    "grommet": "^2.5.5",
+    "grommet": "^2.6.5",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "styled-components": "^4.1.3"
@@ -40,7 +40,7 @@
     "babel-plugin-styled-components": "^1.10.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-react-app": "^7.0.0",
+    "babel-preset-react-app": "^7.0.2",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.9.1",
     "jest": "^24.1.0",
@@ -51,8 +51,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-progress": "^1.0.0",
     "rollup-plugin-url": "^2.2.0",
-    "styled-components": "^4.1.3",
-    "styled-icons": "^6.7.0"
+    "styled-components": "^4.1.3"
   },
   "gitHead": "ef53db97aa8cc0b402b3544a731dc10c9ff12641"
 }
diff --git a/packages/section/package.json b/packages/section/package.json
@@ -27,7 +27,7 @@
     "url": "https://github.com/centrifuge/axis/issues"
   },
   "peerDependencies": {
-    "grommet": "^2.5.5",
+    "grommet": "^2.6.5",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "styled-components": "^4.1.3"
@@ -40,7 +40,7 @@
     "babel-plugin-styled-components": "^1.10.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-react-app": "^7.0.0",
+    "babel-preset-react-app": "^7.0.2",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.9.1",
     "jest": "^24.1.0",
@@ -51,8 +51,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-progress": "^1.0.0",
     "rollup-plugin-url": "^2.2.0",
-    "styled-components": "^4.1.3",
-    "styled-icons": "^6.7.0"
+    "styled-components": "^4.1.3"
   },
   "gitHead": "ef53db97aa8cc0b402b3544a731dc10c9ff12641"
 }
diff --git a/packages/theme/package.json b/packages/theme/package.json
@@ -28,7 +28,7 @@
     "url": "https://github.com/centrifuge/axis/issues"
   },
   "peerDependencies": {
-    "grommet": "^2.5.5",
+    "grommet": "^2.6.5",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "styled-components": "^4.1.3"
@@ -41,7 +41,7 @@
     "babel-plugin-styled-components": "^1.10.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-react-app": "^7.0.0",
+    "babel-preset-react-app": "^7.0.2",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.9.1",
     "jest": "^24.1.0",
@@ -52,8 +52,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-progress": "^1.0.0",
     "rollup-plugin-url": "^2.2.0",
-    "styled-components": "^4.1.3",
-    "styled-icons": "^6.7.0"
+    "styled-components": "^4.1.3"
   },
   "gitHead": "ef53db97aa8cc0b402b3544a731dc10c9ff12641"
 }
diff --git a/packages/theme/src/theme.js b/packages/theme/src/theme.js
@@ -1,6 +1,6 @@
 import { css } from "styled-components";
 import { base } from "grommet/themes";
-import { Button } from "grommet";
+import {Button, Select} from "grommet";
 import { deepMerge } from "grommet/utils/object";
 import { Close } from "grommet-icons";
 
@@ -109,13 +109,13 @@ const textSizes = {
   ...textSpecs,
   extend: props => css`
     ${props.textAlign &&
-      props.textAlign === "justify" &&
-      css`
+  props.textAlign === "justify" &&
+  css`
         text-align: justify;
       `};
 
     ${props.hyphens &&
-      css`
+  css`
         hyphens: ${props.hyphens === true ? "auto" : "unset"};
       `}
   `
@@ -213,6 +213,17 @@ export const axisThemeConfig = deepMerge(base, {
       }
     `
   },
+  box: {
+    extend: props => css`
+      // 
+      ${props.responsiveChildren && css`
+        > * {
+          flex: 1;
+        }
+      `}
+       
+    `
+  },
   button: {
     padding: {
       horizontal: `${32 - borderWidth}px`,
@@ -248,7 +259,7 @@ export const axisThemeConfig = deepMerge(base, {
         border-color: ${brandColor};
 
         ${!props.primary &&
-          css`
+    css`
             color: ${brandColor};
           `}
       }
@@ -261,7 +272,7 @@ export const axisThemeConfig = deepMerge(base, {
        * Changes the hover background color
        */
       ${props.primary &&
-        css`
+    css`
           &:hover {
             background-color: ${brandColor};
           }
@@ -272,27 +283,27 @@ export const axisThemeConfig = deepMerge(base, {
        */
       ${
         !props.textAlign
-          ? css`
+            ? css`
               text-align: center;
             `
-          : css`
+            : css`
               text-align: ${props.textAlign};
             `
-      }
+        }
 
       /* NEW PROP: underline
        * Adds an underline to buttons, ideally used with 'plain' button type
        */
       ${props.underline &&
-        css`
+    css`
           text-decoration: underline;
         `}
 
       /* NEW PROP: white
        * Customizes the hover background & border colors 
        */
       ${props.white &&
-        css`
+    css`
           &:hover {
             background-color: ${white};
             border-color: ${white};
@@ -309,7 +320,7 @@ export const axisThemeConfig = deepMerge(base, {
        * Creates a custom styled textInput with a nice single bottom border
        */
       ${props.newsletter &&
-        css`
+    css`
           font-weight: ${fwMedium};
           font-family: ${ffStack};
           color: ${black};
@@ -333,9 +344,7 @@ export const axisThemeConfig = deepMerge(base, {
     },
     margin: 0,
     extend: css`
-      /* HACK: 
-       * These are hacks to make up for poorly themeable elements
-       */
+      
       label {
         line-height: 1;
       }