@hashicorp/react-global-styles - npm Package Compare versions

Comparing version 3.0.0 to 3.1.0

package.json

 {
   "name": "@hashicorp/react-global-styles",
   "description": "global styles shared across HashiCorp sites",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "author": "Hashicorp - Mike Wickett",
@@ -14,3 +14,3 @@ "license": "MPL-2.0",
   },
-  "gitHead": "20fc0bc5c23633a15474ba2186862e6335ec7035"
+  "gitHead": "2820c17206084ce62de83b43a65d4f407418e519"
 }

stories/components/g-grid-container/g-grid-container.stories.js

@@ -1,21 +0,10 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import GGridContainerDocs from './GGridContainerDocs.mdx'
+import GGridContainerDocs from './g-grid-container.mdx'
 import GridContainerDemo from './GridContainerDemo'
 
-function DocsPage() {
-  return (
-    <div>
-      <div className="g-grid-container">
-        <GGridContainerDocs />
-      </div>
-      <GridContainerDemo />
-    </div>
-  )
+export const Demo = GridContainerDemo
+
+export default {
+  title: 'Packages|Global Styles/components/g-grid-container',
+  component: GridContainerDemo,
+  parameters: { docs: { page: GGridContainerDocs } }
 }
-
-const storiesTokens = storiesOf('Global Styles/Components', module)
-
-storiesTokens.add('g-grid-container', DocsPage, {
-  docs: { container: null, page: null }
-})

stories/components/g-type/g-type.stories.js

 import React from 'react'
-import { storiesOf } from '@storybook/react'
 import GTypeDocs from './GTypeDocs.mdx'
+import cssGType from '!!raw-loader!../../../components/g-type.css'
+import changeCase from 'change-case'
+import parseClassNamesFromCss from '../../_helpers/parseClassNamesFromCss'
+const typeStyleSlugs = parseClassNamesFromCss(cssGType)
 
-function DocsPage() {
+export const Demo = () => {
   return (
-    <div className="g-grid-container">
-      <div className="g-content">
-        <GTypeDocs />
-      </div>
+    <div style={{ marginBottom: '20rem' }}>
+      {typeStyleSlugs.map(className => {
+        const styleName = changeCase.title(className.replace('g-type', ''))
+        return (
+          <div className="g-content">
+            <p style={{ marginTop: '4rem' }}>
+              <code>
+                <strong>{styleName}</strong> ( .{className} )
+              </code>
+            </p>
+            <p className={className} style={{ color: 'var(--black)' }}>
+              Quick Brown Foxes Jumped Lazily
+            </p>
+          </div>
+        )
+      })}
     </div>
@@ -15,6 +30,6 @@ )
 
-const storiesTokens = storiesOf('Global Styles/Components', module)
-
-storiesTokens.add('g-type', DocsPage, {
-  docs: { container: null, page: null }
-})
+export default {
+  title: 'Packages|Global Styles/components/g-type',
+  component: () => <div>Hello type stuff!</div>,
+  parameters: { docs: { page: GTypeDocs } }
+}

stories/custom-media/custom-media.stories.js

@@ -1,19 +0,10 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import CustomMediaDocs from './CustomMediaDocs.mdx'
+import GGridContainerDocs from './custom-media.mdx'
+import CustomMediaDemo from './CustomMediaDemo'
 
-function DocsPage() {
-  return (
-    <div className="g-grid-container">
-      <div className="g-content">
-        <CustomMediaDocs />
-      </div>
-    </div>
-  )
+export const Demo = CustomMediaDemo
+
+export default {
+  title: 'Packages|Global Styles/custom-media',
+  component: CustomMediaDemo,
+  parameters: { docs: { page: GGridContainerDocs } }
 }
-
-const storiesTokens = storiesOf('Global Styles', module)
-
-storiesTokens.add('Custom Media', DocsPage, {
-  docs: { container: null, page: null }
-})

stories/custom-properties/color/color.stories.js

 import React from 'react'
-import { storiesOf } from '@storybook/react'
 import ColorDocs from './ColorDocs.mdx'
+import cssColor from '!!raw-loader!../../../custom-properties/color.css'
 
-function DocsPage() {
-  return (
-    <div className="g-container">
-      <div className="g-content">
-        <ColorDocs />
-      </div>
-    </div>
-  )
+export const Demo = () => (
+  <pre>
+    <code>{cssColor}</code>
+  </pre>
+)
+
+export default {
+  title: 'Packages|Global Styles/custom-properties/color',
+  component: Demo,
+  parameters: { docs: { page: ColorDocs } }
 }
-
-const storiesTokens = storiesOf('Global Styles/Custom Properties', module)
-
-storiesTokens.add('Color', DocsPage, {
-  docs: { container: null, page: null }
-})

stories/custom-properties/font/font.stories.js

 import React from 'react'
-import { storiesOf } from '@storybook/react'
 import FontDocs from './FontDocs.mdx'
+import cssFont from '!!raw-loader!../../../custom-properties/font.css'
 
-function DocsPage() {
-  return (
-    <div className="g-container">
-      <div className="g-content">
-        <FontDocs />
-      </div>
-    </div>
-  )
+export const Demo = () => (
+  <pre>
+    <code>{cssFont}</code>
+  </pre>
+)
+
+export default {
+  title: 'Packages|Global Styles/custom-properties/font',
+  component: Demo,
+  parameters: { docs: { page: FontDocs } }
 }
-
-const storiesTokens = storiesOf('Global Styles/Custom Properties', module)
-
-storiesTokens.add('Font', DocsPage, {
-  docs: { container: null, page: null }
-})

No alert changes

Improved metrics

Number of package files

42

increased by2.44%

Lines of code

1803

increased by3.32%

Worsened metrics

Total package byte prevSize

65048

decreased by-4.6%

No dependency changes