fix: Add missing colour vars and Column export, lineClamp support, Co…

…lor, Heading, Text demos (#471)
Doist · Mar 18, 2021 · f25a1dc · f25a1dc
1 parent d09ddf3
commit f25a1dc
Show file tree

Hide file tree

Showing 27 changed files with 658 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+## v9.2.0-beta
+
+-   [Feature] Add `largest` size increase support for `Heading` component
+-   [Feature] Add `lineClamp` for text truncation to `Heading` and `Text` components
+-   [Fix] Export the `Column` component in the main entry point
+-   [Fix] Add missing colour variables
+-   [Docs] Add Storybook demos for `Heading`, `Text`, and colour swatches
+
 ## v9.1.0-beta.2
 
 -   [Fix] Move patch-package to dependencies to allow it to run (on nothing since we're patching a dev-dependency) after being installed as a package.

diff --git a/docs/iframe.html b/docs/iframe.html
@@ -71,4 +71,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.627414398550bef44ef2.bundle.js"></script><script src="vendors~main.627414398550bef44ef2.bundle.js"></script><script src="main.627414398550bef44ef2.bundle.js"></script></body></html>
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.9ac036c1eaf0680fd0e8.bundle.js"></script><script src="vendors~main.9ac036c1eaf0680fd0e8.bundle.js"></script><script src="main.9ac036c1eaf0680fd0e8.bundle.js"></script></body></html>
diff --git a/docs/main.627414398550bef44ef2.bundle.js b/docs/main.627414398550bef44ef2.bundle.js
diff --git a/docs/main.627414398550bef44ef2.bundle.js.map b/docs/main.627414398550bef44ef2.bundle.js.map
diff --git a/docs/main.9ac036c1eaf0680fd0e8.bundle.js b/docs/main.9ac036c1eaf0680fd0e8.bundle.js
diff --git a/docs/main.9ac036c1eaf0680fd0e8.bundle.js.map b/docs/main.9ac036c1eaf0680fd0e8.bundle.js.map
diff --git a/docs/runtime~main.627414398550bef44ef2.bundle.js.map b/docs/runtime~main.627414398550bef44ef2.bundle.js.map
diff --git a/...ntime~main.627414398550bef44ef2.bundle.js → ...ntime~main.9ac036c1eaf0680fd0e8.bundle.js b/...ntime~main.627414398550bef44ef2.bundle.js → ...ntime~main.9ac036c1eaf0680fd0e8.bundle.js
diff --git a/docs/runtime~main.9ac036c1eaf0680fd0e8.bundle.js.map b/docs/runtime~main.9ac036c1eaf0680fd0e8.bundle.js.map
diff --git a/docs/vendors~main.627414398550bef44ef2.bundle.js b/docs/vendors~main.627414398550bef44ef2.bundle.js
diff --git a/docs/vendors~main.627414398550bef44ef2.bundle.js.map b/docs/vendors~main.627414398550bef44ef2.bundle.js.map
diff --git a/docs/vendors~main.9ac036c1eaf0680fd0e8.bundle.js b/docs/vendors~main.9ac036c1eaf0680fd0e8.bundle.js
diff --git a/...27414398550bef44ef2.bundle.js.LICENSE.txt → ...ac036c1eaf0680fd0e8.bundle.js.LICENSE.txt b/...27414398550bef44ef2.bundle.js.LICENSE.txt → ...ac036c1eaf0680fd0e8.bundle.js.LICENSE.txt
diff --git a/docs/vendors~main.9ac036c1eaf0680fd0e8.bundle.js.map b/docs/vendors~main.9ac036c1eaf0680fd0e8.bundle.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
     "name": "@doist/reactist",
     "description": "Open source React components by Doist",
     "author": "Henning Muszynski <[email protected]> (http://doist.com)",
-    "version": "9.1.0-beta.2",
+    "version": "9.2.0-beta",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": "git+https://github.com/Doist/reactist.git",

diff --git a/src/index.ts b/src/index.ts
@@ -1,7 +1,7 @@
 import './new-components/default-styles.less'
 
 export { Box } from './new-components/box'
-export { Columns } from './new-components/columns'
+export { Columns, Column } from './new-components/columns'
 export { default as Avatar } from './components/avatar'
 export { default as Button } from './components/button'
 export { default as Checkbox } from './components/checkbox'

diff --git a/src/new-components/default-styles.less b/src/new-components/default-styles.less
@@ -20,6 +20,7 @@
     --reactist-spacing-medium: 12px;
     --reactist-spacing-large: 16px;
     --reactist-spacing-xlarge: 24px;
+    --reactist-spacing-xxlarge: 32px;
 
     /* font sizes */
     --reactist-font-size-xsmall: 10px;
@@ -28,6 +29,7 @@
     --reactist-font-size-large: 16px;
     --reactist-font-size-header: 20px;
     --reactist-font-size-header-large: 24px;
+    --reactist-font-size-header-xlarge: 32px;
 
     /* font weight */
     --reactist-font-weight-regular: 400;
@@ -49,4 +51,57 @@
     --reactist-bg-shade: rgb(250, 250, 250);
     --reactist-bg-highlight: rgb(242, 242, 242);
     --reactist-bg-selected: rgb(230, 230, 230);
+
+    /* colors */
+    --reactist-framework-fill-accent: rgb(224, 237, 255);
+    --reactist-framework-fill-aside: rgb(250, 250, 250);
+    --reactist-framework-fill-background: rgb(250, 250, 250);
+    --reactist-framework-fill-base: rgb(255, 255, 255);
+    --reactist-framework-fill-crater: rgb(242, 242, 242);
+    --reactist-framework-fill-crest: rgb(230, 230, 230);
+    --reactist-framework-fill-elevated: rgb(255, 255, 255);
+    --reactist-framework-fill-selected: rgb(236, 236, 236);
+    --reactist-framework-fill-highlight: rgb(242, 242, 242);
+    --reactist-framework-fill-ledge: rgb(224, 224, 224);
+    --reactist-framework-fill-peak: rgb(61, 61, 61);
+    --reactist-framework-fill-pinnacle: rgb(235, 235, 235);
+    --reactist-framework-fill-ridge: rgb(242, 242, 242);
+    --reactist-framework-fill-summit: rgb(214, 214, 214);
+
+    --reactist-framework-separator: rgb(230, 230, 230);
+
+    --reactist-framework-border: rgb(214, 214, 214);
+    --reactist-framework-border-focus: var(--reactist-content-tertiary);
+    --reactist-framework-border-alpha: rgba(0, 0, 0, 0.15);
+
+    --reactist-content-primary: rgba(0, 0, 0, 0.88);
+    --reactist-content-secondary: rgba(0, 0, 0, 0.56);
+    --reactist-content-tertiary: rgba(0, 0, 0, 0.40);
+    --reactist-content-quaternary: rgba(0, 0, 0, 0.24);
+    --reactist-content-light-on-dark: rgb(255, 255, 255);
+
+    --reactist-chromatic-fill-red: rgb(209, 69, 59);
+    --reactist-chromatic-fill-orange: rgb(235, 141, 19);
+    --reactist-chromatic-fill-green: rgb(5, 133, 39);
+    --reactist-chromatic-fill-teal: rgb(0, 126, 158);
+    --reactist-chromatic-fill-blue: rgb(36, 111, 224);
+    --reactist-chromatic-fill-purple: rgb(105, 47, 194);
+    --reactist-chromatic-fill-charcoal: rgb(82, 82, 82);
+    --reactist-chromatic-fill-grey: rgb(128, 128, 128);
+    --reactist-chromatic-fill-midnight: rgb(76, 91, 112);
+
+    --reactist-chromatic-content-red: rgb(209, 69, 59);
+    --reactist-chromatic-content-orange: rgb(235, 141, 19);
+    --reactist-chromatic-content-green: rgb(5, 133, 39);
+    --reactist-chromatic-content-green-background: rgba(5, 133, 39, 0.05);
+    --reactist-chromatic-content-green-background-highlight: rgba(5, 133, 39, 0.1);
+    --reactist-chromatic-content-teal: rgb(0, 126, 158);
+    --reactist-chromatic-content-blue: rgb(36, 111, 224);
+    --reactist-chromatic-content-purple: rgb(105, 47, 194);
+    --reactist-chromatic-content-charcoal: rgb(82, 82, 82);
+    --reactist-chromatic-content-grey: rgb(128, 128, 128);
+
+    --reactist-chromatic-highlight-blue: rgb(88, 93, 100);
+    --reactist-chromatic-highlight-green: rgb(216, 235, 221);
+    --reactist-chromatic-highlight-red: rgb(252, 242, 242);
 }
diff --git a/src/new-components/heading/heading.module.css b/src/new-components/heading/heading.module.css
@@ -1,6 +1,4 @@
 .heading {
-    margin: 0;
-    padding: 0;
     color: var(--reactist-content-primary);
     font-weight: var(--reactist-font-weight-strong);
 }
@@ -14,6 +12,9 @@
 h1.heading {
     font-size: var(--reactist-font-size-header);
 }
+h1.size-largest {
+    font-size: var(--reactist-font-size-header-xlarge);
+}
 h1.size-larger {
     font-size: var(--reactist-font-size-header-large);
 }
@@ -22,10 +23,13 @@ h1.size-smaller {
 }
 
 h2.heading {
-    font-size: var(--reactist-font-size-large);
+    font-size: var(--reactist-font-size-header);
+}
+h2.size-largest {
+    font-size: var(--reactist-font-size-header-xlarge);
 }
 h2.size-larger {
-    font-size: var(--reactist-font-size-header);
+    font-size: var(--reactist-font-size-header-large);
 }
 h2.size-smaller {
     font-size: var(--reactist-font-size-normal);
@@ -34,6 +38,9 @@ h2.size-smaller {
 h3.heading {
     font-size: var(--reactist-font-size-normal);
 }
+h3.size-largest {
+    font-size: var(--reactist-font-size-header);
+}
 h3.size-larger {
     font-size: var(--reactist-font-size-large);
 }
@@ -46,15 +53,48 @@ h5.heading,
 h6.heading {
     /*
      * unlike at higher levels, this one is kept as the same size as h3's
-     * you can make it one level larger visually, but making it smaller has no effect
+     * you can make it two levels larger visually, but making it smaller has no effect
      */
     font-size: var(--reactist-font-size-normal);
 }
 
+h4.size-largest,
+h5.size-largest,
+h6.size-largest {
+    font-size: var(--reactist-font-size-header);
+}
+
 h4.size-larger,
 h5.size-larger,
 h6.size-larger {
     font-size: var(--reactist-font-size-large);
 }
 
 /* h4/h5/h6 can't be made smaller, maybe we reconsider this? */
+
+/* truncated text */
+
+.line-clamp-1 {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.lineClamp {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.line-clamp-2 {
+    -webkit-line-clamp: 2;
+}
+.line-clamp-3 {
+    -webkit-line-clamp: 3;
+}
+.line-clamp-4 {
+    -webkit-line-clamp: 4;
+}
+.line-clamp-5 {
+    -webkit-line-clamp: 5;
+}
diff --git a/src/new-components/heading/heading.stories.tsx b/src/new-components/heading/heading.stories.tsx
@@ -0,0 +1,127 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { withKnobs, select, text } from '@storybook/addon-knobs'
+
+import { Stack } from '../stack'
+import { Heading } from './heading'
+
+const HeadingChapter = {
+    subtitle: 'Heading',
+    sections: [
+        { sectionFn: HeadingStory, options: { showPropTables: false } },
+        { sectionFn: TruncatedHeadingStory, options: { showPropTables: false } },
+    ],
+}
+
+function HeadingStory() {
+    return (
+        <section className="story">
+            <Stack dividers space="medium">
+                <Stack space="small">
+                    <Heading level={1} size="largest">
+                        Heading level 1, largest
+                    </Heading>
+                    <Heading level={1} size="larger">
+                        Heading level 1, larger
+                    </Heading>
+                    <Heading level={1}>Heading level 1</Heading>
+                    <Heading level={1} size="smaller">
+                        Heading level 1, smaller
+                    </Heading>
+                </Stack>
+
+                <Stack space="small">
+                    <Heading level={2} size="largest">
+                        Heading level 2, largest
+                    </Heading>
+                    <Heading level={2} size="larger">
+                        Heading level 2, larger
+                    </Heading>
+                    <Heading level={2}>Heading level 2</Heading>
+                    <Heading level={2} size="smaller">
+                        Heading level 2, smaller
+                    </Heading>
+                </Stack>
+
+                <Stack space="small">
+                    <Heading level={3} size="largest">
+                        Heading level 3, largest
+                    </Heading>
+                    <Heading level={3} size="larger">
+                        Heading level 3, larger
+                    </Heading>
+                    <Heading level={3}>Heading level 3</Heading>
+                    <Heading level={3} size="smaller">
+                        Heading level 3, smaller
+                    </Heading>
+                </Stack>
+
+                <Stack space="small">
+                    <Heading level={4} size="largest">
+                        Heading level 4 / 5 / 6, largest
+                    </Heading>
+                    <Heading level={4} size="larger">
+                        Heading level 4 / 5 / 6, larger
+                    </Heading>
+                    <Heading level={4}>Heading level 4 / 5 / 6</Heading>
+                </Stack>
+            </Stack>
+        </section>
+    )
+}
+
+function TruncatedHeadingStory() {
+    return (
+        <section className="story">
+            <Heading level={1} size="largest" lineClamp={1}>
+                This is a long title which we will use demonstrate truncating content. When this
+                overflows and begins to drop to a new line, its overflowing content will be replaced
+                by ellipses.
+            </Heading>
+            <Heading level={2} lineClamp={2}>
+                Now we have a subtitle which we will use to demostrate truncating to multiple lines.
+                Sometimes we need to provide more context yet still remain skimmable to users, and
+                subtitles are a good way to do this. As it&rsquo;s much longer now we can allow a
+                second line to be displayed before truncating it at two lines.
+            </Heading>
+        </section>
+    )
+}
+
+function HeadingPlaygroundStory() {
+    const level = select('level', ['1', '2', '3', '4', '5', '6'], '1')
+    const size = select(
+        'size',
+        {
+            largest: 'largest',
+            larger: 'larger',
+            'default (undefined)': undefined,
+            smaller: 'smaller',
+        },
+        undefined,
+    )
+    const weight = select('weight', ['regular', 'light'], 'regular')
+    const lineClamp = select('lineClamp', { none: undefined, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5 }, 1)
+    const children = text('children', 'Lorem ipsum dolor, sit amet consectetur adipisicing elit')
+
+    return (
+        <section className="story playground">
+            <Heading level={level} size={size} weight={weight} lineClamp={lineClamp}>
+                {children}
+            </Heading>
+        </section>
+    )
+}
+
+// Not too sure what's going on in this block, might be an issue with bad typings.
+// These should all be reworked once we upgrade to Storybook 6 so we won't spend
+// time on fixing the types now
+
+// eslint-disable-next-line
+storiesOf('Heading', module)
+    .addDecorator(withKnobs)
+    // @ts-expect-error
+    .addWithChapters('Component Overview', {
+        chapters: [HeadingChapter],
+    })
+    .add('Component Playground', HeadingPlaygroundStory)