Changed Paragraph and Heading to add xlarge size (grommet#2395)

* Changed Paragraph and Heading to add xlarge size

* Added tests

package.json

@@ -91,6 +91,7 @@
     "grommet-theme-dxc": "^0.1.0",
     "grommet-theme-hp": "^0.1.0",
     "grommet-theme-hpe": "^0.4.0",
+    "grommet-theme-v1": "^0.1.0",
     "jest": "^23.1.0",
     "jest-cli": "^23.1.0",
     "jest-styled-components": "^6.2.0",

src/js/components/AccordionPanel/AccordionPanel.js

@@ -65,7 +65,7 @@ class AccordionPanel extends Component {
       || 'control', theme);
 
     return (
-      <AccordionContext>
+      <AccordionContext.Consumer>
         {(panelContext) => {
           const { active, animate, onPanelChange } = panelContext;
           const AccordionIcon = active ? (
@@ -123,7 +123,7 @@ class AccordionPanel extends Component {
             </Box>
           );
         }}
-      </AccordionContext>
+      </AccordionContext.Consumer>
     );
   }
 }

src/js/components/Heading/README.md

@@ -156,6 +156,7 @@ adjustments. Defaults to `medium`.
 small
 medium
 large
+xlarge
 string
 ```
 

src/js/components/Heading/__tests__/Heading-test.js

@@ -38,15 +38,19 @@ test('Heading size renders', () => {
       <Heading level={1} size='small' />
       <Heading level={1} size='medium' />
       <Heading level={1} size='large' />
+      <Heading level={1} size='xlarge' />
       <Heading level={2} size='small' />
       <Heading level={2} size='medium' />
       <Heading level={2} size='large' />
+      <Heading level={2} size='xlarge' />
       <Heading level={3} size='small' />
       <Heading level={3} size='medium' />
       <Heading level={3} size='large' />
+      <Heading level={3} size='xlarge' />
       <Heading level={4} size='small' />
       <Heading level={4} size='medium' />
       <Heading level={4} size='large' />
+      <Heading level={4} size='xlarge' />
     </Grommet>
   );
   const tree = component.toJSON();

src/js/components/Heading/__tests__/__snapshots__/Heading-test.js.snap

@@ -421,42 +421,63 @@ exports[`Heading size renders 1`] = `
   font-weight: 600;
 }
 
-.c5 {
+.c4 {
+  font-size: 114px;
+  line-height: 120px;
+  max-width: 2736px;
+  font-weight: 600;
+}
+
+.c6 {
   font-size: 34px;
   line-height: 40px;
   max-width: 816px;
   font-weight: 600;
 }
 
-.c4 {
+.c5 {
   font-size: 26px;
   line-height: 32px;
   max-width: 624px;
   font-weight: 600;
 }
 
-.c6 {
+.c7 {
   font-size: 50px;
   line-height: 56px;
   max-width: 1200px;
   font-weight: 600;
 }
 
-.c7 {
+.c8 {
+  font-size: 66px;
+  line-height: 72px;
+  max-width: 1584px;
+  font-weight: 600;
+}
+
+.c9 {
   font-size: 22px;
   line-height: 28px;
   max-width: 528px;
   font-weight: 600;
 }
 
-.c8 {
+.c10 {
   font-size: 34px;
   line-height: 40px;
   max-width: 816px;
   font-weight: 600;
 }
 
-.c9 {
+.c11 {
+  font-size: 42px;
+  line-height: 48px;
+  max-width: 1008px;
+  font-weight: 600;
+}
+
+.c12 {
   font-size: 18px;
   line-height: 24px;
   max-width: 432px;
@@ -488,47 +509,71 @@ exports[`Heading size renders 1`] = `
 }
 
 @media only screen and (max-width:768px) {
-  .c5 {
+  .c4 {
+    font-size: 66px;
+    line-height: 72px;
+    max-width: 1584px;
+  }
+}
+
+@media only screen and (max-width:768px) {
+  .c6 {
     font-size: 22px;
     line-height: 28px;
     max-width: 528px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c4 {
+  .c5 {
     font-size: 22px;
     line-height: 28px;
     max-width: 528px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c6 {
+  .c7 {
     font-size: 34px;
     line-height: 40px;
     max-width: 816px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c7 {
+  .c8 {
+    font-size: 42px;
+    line-height: 48px;
+    max-width: 1008px;
+  }
+}
+
+@media only screen and (max-width:768px) {
+  .c9 {
     font-size: 18px;
     line-height: 24px;
     max-width: 432px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c8 {
+  .c10 {
     font-size: 18px;
     line-height: 24px;
     max-width: 432px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c9 {
+  .c11 {
+    font-size: 18px;
+    line-height: 24px;
+    max-width: 432px;
+  }
+}
+
+@media only screen and (max-width:768px) {
+  .c12 {
     font-size: 18px;
     line-height: 24px;
     max-width: 432px;
@@ -550,42 +595,58 @@ exports[`Heading size renders 1`] = `
     className="-h1 c3"
     size="large"
   />
+  <h1
+    className="-h1 c4"
+    size="xlarge"
+  />
   <h2
-    className="-h2 c4"
+    className="-h2 c5"
     size="small"
   />
   <h2
-    className="-h2 c5"
+    className="-h2 c6"
     size="medium"
   />
   <h2
-    className="-h2 c6"
+    className="-h2 c7"
     size="large"
   />
+  <h2
+    className="-h2 c8"
+    size="xlarge"
+  />
   <h3
-    className="-h3 c7"
+    className="-h3 c9"
     size="small"
   />
   <h3
-    className="-h3 c7"
+    className="-h3 c9"
     size="medium"
   />
   <h3
-    className="-h3 c8"
+    className="-h3 c10"
     size="large"
   />
+  <h3
+    className="-h3 c11"
+    size="xlarge"
+  />
   <h4
-    className="-h4 c9"
+    className="-h4 c12"
     size="small"
   />
   <h4
-    className="-h4 c9"
+    className="-h4 c12"
     size="medium"
   />
   <h4
-    className="-h4 c9"
+    className="-h4 c12"
     size="large"
   />
+  <h4
+    className="-h4 c12"
+    size="xlarge"
+  />
 </div>
 `;
 

src/js/components/Heading/doc.js

@@ -28,7 +28,7 @@ The sizing can be further adjusted using the size property.`
       mobile environments.`
     ).defaultValue(true),
     size: PropTypes.oneOfType([
-      PropTypes.oneOf(['small', 'medium', 'large']),
+      PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
       PropTypes.string,
     ]).description(
       `The font size is primarily driven by the chosen tag. But, it can

src/js/components/Heading/index.d.ts

@@ -8,7 +8,7 @@ export interface HeadingProps {
   color?: string;
   level?: "1" | "2" | "3" | "4" | "5" | "6" | "1" | "2" | "3" | "4" | "5" | "6";
   responsive?: boolean;
-  size?: "small" | "medium" | "large" | string;
+  size?: "small" | "medium" | "large" | "xlarge" | string;
   textAlign?: "start" | "center" | "end";
   truncate?: boolean;
 }

src/js/components/Meter/meter.stories.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, Meter } from 'grommet';
+import {
+  Grommet, Box, Meter, Stack, Text,
+} from 'grommet';
 import { grommet } from 'grommet/themes';
 
 const BarMeter = () => (
@@ -24,6 +26,27 @@ const CircleMeter = () => (
   </Grommet>
 );
 
+const LabelledMeter = () => (
+  <Grommet theme={grommet}>
+    <Box align='start'>
+      <Stack anchor='center'>
+        <Meter
+          type='circle'
+          background='light-2'
+          values={[{ value: 30 }]}
+          size='xsmall'
+          thickness='small'
+        />
+        <Box direction='row' align='center' pad={{ bottom: 'xsmall' }}>
+          <Text size='xlarge' weight='bold'>30</Text>
+          <Text size='small'>%</Text>
+        </Box>
+      </Stack>
+    </Box>
+  </Grommet>
+);
+
 storiesOf('Meter', module)
-  .add('Bar Meter', () => <BarMeter />)
-  .add('Circle Meter', () => <CircleMeter />);
+  .add('Bar', () => <BarMeter />)
+  .add('Circle', () => <CircleMeter />)
+  .add('Labelled', () => <LabelledMeter />);

src/js/components/Paragraph/README.md

@@ -124,6 +124,7 @@ small
 medium
 large
 xlarge
+xxlarge
 string
 ```
 

src/js/components/Paragraph/__tests__/Paragraph-test.js

@@ -22,6 +22,7 @@ test('Paragraph size renders', () => {
       <Paragraph size='medium' />
       <Paragraph size='large' />
       <Paragraph size='xlarge' />
+      <Paragraph size='xxlarge' />
     </Grommet>
   );
   const tree = component.toJSON();

src/js/components/Paragraph/__tests__/__snapshots__/Paragraph-test.js.snap

@@ -138,6 +138,12 @@ exports[`Paragraph size renders 1`] = `
   max-width: 624px;
 }
 
+.c5 {
+  font-size: 34px;
+  line-height: 40px;
+  max-width: 816px;
+}
+
 <div
   className="c0"
 >
@@ -157,6 +163,10 @@ exports[`Paragraph size renders 1`] = `
     className="c4"
     size="xlarge"
   />
+  <p
+    className="c5"
+    size="xxlarge"
+  />
 </div>
 `;
 

src/js/components/Paragraph/doc.js

@@ -17,7 +17,7 @@ export const doc = (Paragraph) => {
       'A color identifier to use for the text color.'
     ),
     size: PropTypes.oneOfType([
-      PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
+      PropTypes.oneOf(['small', 'medium', 'large', 'xlarge', 'xxlarge']),
       PropTypes.string,
     ]).description(
       'The size of the Paragraph text.'

src/js/components/Paragraph/index.d.ts

@@ -6,7 +6,7 @@ export interface ParagraphProps {
   gridArea?: string;
   margin?: "none" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | {bottom: "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | string,horizontal: "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | string,left: "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | string,right: "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | string,top: "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | string,vertical: "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | string} | string;
   color?: string;
-  size?: "small" | "medium" | "large" | "xlarge" | string;
+  size?: "small" | "medium" | "large" | "xlarge" | "xxlarge" | string;
   textAlign?: "start" | "center" | "end";
 }