29 | Content breaking out of regular layout
30 | {/* ... */}
31 |
32 | ```
--------------------------------------------------------------------------------
/src/layout/page-frame/index.ts:
--------------------------------------------------------------------------------
1 | import styles from './page-frame.module.scss';
2 |
3 | export const centerColumn = styles.centerColumn;
4 | export const wideColumn = styles.wideColumn;
5 | export const textColumn = styles.textColumn;
6 |
--------------------------------------------------------------------------------
/src/layout/page-frame/page-frame.module.scss:
--------------------------------------------------------------------------------
1 | .centerColumn {
2 | width: calc(100% - 40px);
3 | max-width: 1000px;
4 | margin-right: auto;
5 | margin-left: auto;
6 | }
7 |
8 | .wideColumn {
9 | width: calc(100% - 40px);
10 | max-width: 1440px;
11 | margin-right: auto;
12 | margin-left: auto;
13 | }
14 |
15 | .textColumn {
16 | max-width: 700px;
17 | }
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/src/serviceWorker.ts:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.0/8 are considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | type Config = {
24 | onSuccess?: (registration: ServiceWorkerRegistration) => void;
25 | onUpdate?: (registration: ServiceWorkerRegistration) => void;
26 | };
27 |
28 | export function register(config?: Config) {
29 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
30 | // The URL constructor is available in all browsers that support SW.
31 | const publicUrl = new URL(
32 | process.env.PUBLIC_URL,
33 | window.location.href
34 | );
35 | if (publicUrl.origin !== window.location.origin) {
36 | // Our service worker won't work if PUBLIC_URL is on a different origin
37 | // from what our page is served on. This might happen if a CDN is used to
38 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
39 | return;
40 | }
41 |
42 | window.addEventListener('load', () => {
43 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
44 |
45 | if (isLocalhost) {
46 | // This is running on localhost. Let's check if a service worker still exists or not.
47 | checkValidServiceWorker(swUrl, config);
48 |
49 | // Add some additional logging to localhost, pointing developers to the
50 | // service worker/PWA documentation.
51 | navigator.serviceWorker.ready.then(() => {
52 | console.log(
53 | 'This web app is being served cache-first by a service ' +
54 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
55 | );
56 | });
57 | } else {
58 | // Is not localhost. Just register service worker
59 | registerValidSW(swUrl, config);
60 | }
61 | });
62 | }
63 | }
64 |
65 | function registerValidSW(swUrl: string, config?: Config) {
66 | navigator.serviceWorker
67 | .register(swUrl)
68 | .then(registration => {
69 | registration.onupdatefound = () => {
70 | const installingWorker = registration.installing;
71 | if (installingWorker == null) {
72 | return;
73 | }
74 | installingWorker.onstatechange = () => {
75 | if (installingWorker.state === 'installed') {
76 | if (navigator.serviceWorker.controller) {
77 | // At this point, the updated precached content has been fetched,
78 | // but the previous service worker will still serve the older
79 | // content until all client tabs are closed.
80 | console.log(
81 | 'New content is available and will be used when all ' +
82 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
83 | );
84 |
85 | // Execute callback
86 | if (config && config.onUpdate) {
87 | config.onUpdate(registration);
88 | }
89 | } else {
90 | // At this point, everything has been precached.
91 | // It's the perfect time to display a
92 | // "Content is cached for offline use." message.
93 | console.log('Content is cached for offline use.');
94 |
95 | // Execute callback
96 | if (config && config.onSuccess) {
97 | config.onSuccess(registration);
98 | }
99 | }
100 | }
101 | };
102 | };
103 | })
104 | .catch(error => {
105 | console.error('Error during service worker registration:', error);
106 | });
107 | }
108 |
109 | function checkValidServiceWorker(swUrl: string, config?: Config) {
110 | // Check if the service worker can be found. If it can't reload the page.
111 | fetch(swUrl, {
112 | headers: { 'Service-Worker': 'script' }
113 | })
114 | .then(response => {
115 | // Ensure service worker exists, and that we really are getting a JS file.
116 | const contentType = response.headers.get('content-type');
117 | if (
118 | response.status === 404 ||
119 | (contentType != null && contentType.indexOf('javascript') === -1)
120 | ) {
121 | // No service worker found. Probably a different app. Reload the page.
122 | navigator.serviceWorker.ready.then(registration => {
123 | registration.unregister().then(() => {
124 | window.location.reload();
125 | });
126 | });
127 | } else {
128 | // Service worker found. Proceed as normal.
129 | registerValidSW(swUrl, config);
130 | }
131 | })
132 | .catch(() => {
133 | console.log(
134 | 'No internet connection found. App is running in offline mode.'
135 | );
136 | });
137 | }
138 |
139 | export function unregister() {
140 | if ('serviceWorker' in navigator) {
141 | navigator.serviceWorker.ready
142 | .then(registration => {
143 | registration.unregister();
144 | })
145 | .catch(error => {
146 | console.error(error.message);
147 | });
148 | }
149 | }
150 |
--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 |
--------------------------------------------------------------------------------
/src/surfaces/abs-container/abs-container.module.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | position: relative;
3 | }
4 |
5 | .containee {
6 | position: absolute;
7 |
8 | visibility: hidden;
9 | [data-open='true'] & {
10 | visibility: visible;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/surfaces/abs-container/containee/containee.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component, RefObject } from 'react';
2 | import classNames from 'classnames';
3 | //@ts-ignore
4 | import createRef from 'react-create-ref';
5 |
6 | import styles from '../abs-container.module.scss';
7 | import positionStyles from './positions.module.scss';
8 | import displacementStyles from './displacement.module.scss';
9 |
10 | export type Position =
11 | | 'top'
12 | | 'right'
13 | | 'bottom'
14 | | 'left'
15 | | 'cover'
16 | | 'none'
17 | | 'top-start'
18 | | 'right-start'
19 | | 'bottom-start'
20 | | 'left-start'
21 | | 'top-end'
22 | | 'right-end'
23 | | 'bottom-end'
24 | | 'left-end';
25 |
26 | export type ContaineeProps = { position?: Position } & React.HTMLAttributes
;
27 |
28 | export class Containee extends Component {
29 | private ref: RefObject = createRef();
30 |
31 | render() {
32 | const { className, position = 'bottom', ...rest } = this.props;
33 | const positionClass = positionStyles[position];
34 | const displacement = displacementStyles.displacement;
35 |
36 | return (
37 |
43 | );
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/surfaces/abs-container/containee/displacement.module.scss:
--------------------------------------------------------------------------------
1 | .displacement {
2 | &[data-position^='top'] {
3 | margin-bottom: var(--drawer-margin);
4 | }
5 | &[data-position^='right'] {
6 | margin-left: var(--drawer-margin);
7 | }
8 | &[data-position^='bottom'] {
9 | margin-top: var(--drawer-margin);
10 | }
11 | &[data-position^='left'] {
12 | margin-right: var(--drawer-margin);
13 | }
14 | }
15 |
16 | .displacement {
17 | &[data-position='bottom-start'], &[data-position='top-start'] {
18 | margin-left: var(--drawer-indent);
19 | }
20 | &[data-position='bottom-end'], &[data-position='top-end'] {
21 | margin-right: var(--drawer-indent);
22 | }
23 |
24 | &[data-position^='right-start'], &[data-position^='left-start'] {
25 | margin-top: var(--drawer-indent);
26 | }
27 | &[data-position^='right-end'], &[data-position^='left-end'] {
28 | margin-bottom: var(--drawer-indent);
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/surfaces/abs-container/containee/index.ts:
--------------------------------------------------------------------------------
1 | export * from './containee';
2 |
--------------------------------------------------------------------------------
/src/surfaces/abs-container/containee/positions.module.scss:
--------------------------------------------------------------------------------
1 | .top {
2 | bottom: 100%;
3 |
4 | &-start {
5 | bottom: 100%;
6 | left: 0%;
7 | }
8 |
9 | &-end {
10 | bottom: 100%;
11 | right: 0%;
12 | }
13 | }
14 |
15 | .right {
16 | left: 100%;
17 |
18 | &-start {
19 | left: 100%;
20 | top: 0%;
21 | }
22 |
23 | &-end {
24 | left: 100%;
25 | bottom: 0%;
26 | }
27 | }
28 |
29 | .bottom {
30 | top: 100%;
31 |
32 | &-start {
33 | top: 100%;
34 | left: 0%;
35 | }
36 |
37 | &-end {
38 | top: 100%;
39 | right: 0%;
40 | }
41 | }
42 |
43 | .left {
44 | right: 100%;
45 |
46 | &-start {
47 | right: 100%;
48 | top: 0%;
49 | }
50 |
51 | &-end {
52 | right: 100%;
53 | bottom: 0%;
54 | }
55 | }
56 |
57 | .cover {
58 | top: 0%;
59 | left: 0%;
60 | }
61 |
62 | // .none {}
63 |
--------------------------------------------------------------------------------
/src/surfaces/abs-container/container/container.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import cn from 'classnames';
3 | import styles from '../abs-container.module.scss';
4 |
5 | export type ContainerProps = { open?: boolean } & React.HTMLAttributes;
6 |
7 | export function Container(props: ContainerProps) {
8 | const { className, open, ...rest } = props;
9 |
10 | return ;
11 | }
12 |
--------------------------------------------------------------------------------
/src/surfaces/abs-container/container/index.ts:
--------------------------------------------------------------------------------
1 | export * from './container';
2 |
--------------------------------------------------------------------------------
/src/surfaces/abs-container/index.ts:
--------------------------------------------------------------------------------
1 | import styles from './abs-container.module.scss';
2 |
3 | export * from './containee';
4 | export * from './container';
5 |
6 | export const containerClass = styles.container;
7 | export const containeeClass = styles.containee;
--------------------------------------------------------------------------------
/src/surfaces/background/background.module.scss:
--------------------------------------------------------------------------------
1 | .bedrock {
2 | background: var(--bg-bedrock);
3 | }
4 |
5 | .base {
6 | background: var(--bg-base);
7 | }
8 |
9 | .layer {
10 | background: var(--bg-layer);
11 | }
12 |
13 | .crust {
14 | background: var(--bg-crust);
15 | }
16 |
17 | .topping {
18 | background: var(--bg-topping);
19 | &:hover {
20 | background: var(--bg-topping-highlight);
21 | }
22 | }
23 |
24 | .dent {
25 | background: var(--bg-dent);
26 | }
27 |
--------------------------------------------------------------------------------
/src/surfaces/background/index.ts:
--------------------------------------------------------------------------------
1 | import styles from './background.module.scss';
2 |
3 | type BackgroundLayer = 'bedrock' | 'base' | 'layer' | 'crust' | 'topping' | 'dent';
4 |
5 | export const backgrounds: { [key in BackgroundLayer]: string } = {
6 | bedrock: styles.bedrock,
7 | base: styles.base,
8 | layer: styles.layer,
9 | crust: styles.crust,
10 | topping: styles.topping,
11 | dent: styles.dent,
12 | };
13 |
--------------------------------------------------------------------------------
/src/surfaces/bedrock/bedrock.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import { backgrounds } from '../background';
4 |
5 | type BedrockProps = React.HTMLAttributes;
6 |
7 | export function Bedrock(props: BedrockProps) {
8 | return ;
9 | }
10 |
--------------------------------------------------------------------------------
/src/surfaces/bedrock/index.ts:
--------------------------------------------------------------------------------
1 | export * from './bedrock';
2 |
--------------------------------------------------------------------------------
/src/surfaces/card/card.module.scss:
--------------------------------------------------------------------------------
1 | .card {
2 | padding: 20px;
3 | box-sizing: border-box;
4 | }
5 |
--------------------------------------------------------------------------------
/src/surfaces/card/card.spec.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render } from "@testing-library/react";
3 | import { expect } from "chai";
4 |
5 | import { Card } from "./card";
6 |
7 | it("should render default card", () => {
8 | const { getByText } = render(base Card);
9 | const rendered = getByText("base Card");
10 | expect(rendered).to.exist;
11 | });
12 |
13 | // it("should render card with high elevation", () => {
14 | // const { getByText } = render(base Card);
15 | // const rendered = getByText("base Card");
16 | // expect(rendered.classList.contains('elevation-high')).to.equal(true);
17 | // });
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/src/surfaces/card/card.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import styles from './card.module.scss';
4 | import { elevationClass, ElevationHeight } from '../../css-components/elevation';
5 | import { roundnessClass, Roundness } from '../../css-components/roundness';
6 | import { backgrounds } from '../background';
7 |
8 | export type CardProps = {
9 | /**
10 | * Controls the shadow cast by the card, to generate a "stacking" effects.
11 | * For example, a modal floating over elements may have a 'high' elevation
12 | */
13 | elevation?: ElevationHeight;
14 | /** Controls the border radius of the card */
15 | roundness?: Roundness;
16 | } & React.HTMLAttributes;
17 |
18 | /**
19 | * A wrapper resembling a physical card, grouping elements and improve readability.
20 | * @example
21 | *
22 | * Lorem ipsum dolor sit amet, consectetur adipiscing elit.
23 | *
24 | */
25 | export function Card({
26 | className,
27 | elevation = 'low',
28 | roundness = 'default',
29 | ...rest
30 | }: CardProps) {
31 | return (
32 |
43 | );
44 | }
45 |
46 | Card.defaultProps = {
47 | elevation: 'low',
48 | roundness: 'default',
49 | };
50 |
--------------------------------------------------------------------------------
/src/surfaces/card/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./card";
2 |
--------------------------------------------------------------------------------
/src/surfaces/click-outside/click-outside.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component, ReactNode } from 'react';
2 | import onClickOutside, {
3 | OnClickOutProps,
4 | InjectedOnClickOutProps,
5 | } from 'react-onclickoutside';
6 |
7 | type Props = {
8 | children: ReactNode;
9 | disable?: boolean;
10 | onClick: (e: React.MouseEvent) => void;
11 | } & InjectedOnClickOutProps;
12 |
13 | class MyComponent extends Component implements OnClickOutProps {
14 | componentDidUpdate(prevProps: Props) {
15 | const nextProps = this.props;
16 |
17 | if (prevProps.disable !== nextProps.disable) {
18 | if (nextProps.disable) {
19 | this.props.disableOnClickOutside();
20 | } else {
21 | this.props.enableOnClickOutside();
22 | }
23 | }
24 | }
25 |
26 | handleClickOutside = (evt: React.MouseEvent) => {
27 | this.props.onClick(evt);
28 | };
29 |
30 | render() {
31 | return this.props.children;
32 | }
33 | }
34 |
35 | export const ClickOutside = onClickOutside(MyComponent);
36 |
--------------------------------------------------------------------------------
/src/surfaces/click-outside/index.ts:
--------------------------------------------------------------------------------
1 | export * from './click-outside';
--------------------------------------------------------------------------------
/src/surfaces/drawer/default-placeholder.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import styles from './drawer.module.scss';
4 |
5 | export type DrawerPlaceholderProps = React.HTMLAttributes;
6 |
7 | export function DefaultPlaceholder(props: DrawerPlaceholderProps) {
8 | return (
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/surfaces/drawer/drawer.module.scss:
--------------------------------------------------------------------------------
1 | .placeholder {
2 | cursor: pointer;
3 | user-select: none;
4 | }
5 |
--------------------------------------------------------------------------------
/src/surfaces/drawer/drawer.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component, ReactNode, ComponentType } from 'react';
2 |
3 | import { Container } from '../abs-container';
4 | import { ClickOutside } from '../click-outside';
5 |
6 | import { DefaultPlaceholder, DrawerPlaceholderProps } from './default-placeholder';
7 |
8 | export type DrawerProps = {
9 | open?: boolean;
10 | PlaceholderComponent?: ComponentType;
11 | placeholder: ReactNode;
12 |
13 | clickToggles?: boolean;
14 | clickPlaceholderToggles?: boolean;
15 | clickOutside?: boolean;
16 | hoverToOpen?: boolean;
17 |
18 | onChange?: (evt: React.MouseEvent | undefined, open: boolean) => void;
19 | onContainerToggle?: (e: React.MouseEvent) => void;
20 | onPlaceholderToggle?: (e: React.MouseEvent) => void;
21 | onContaineeToggle?: (e: React.MouseEvent) => void;
22 | onClickOutside?: (e: React.MouseEvent) => void;
23 | } & React.HTMLAttributes;
24 |
25 | type DrawerState = {
26 | isOpen: boolean;
27 | };
28 |
29 | export class Drawer extends Component {
30 | state: DrawerState = {
31 | isOpen: this.props.open || false,
32 | };
33 |
34 | static defaultProps = {
35 | PlaceholderComponent: DefaultPlaceholder,
36 | clickPlaceholderToggles: true,
37 | clickOutside: true,
38 | clickToggles: true,
39 | };
40 |
41 | componentWillReceiveProps(nextProps: DrawerProps) {
42 | const prevProps = this.props;
43 |
44 | if (prevProps.open !== nextProps.open && nextProps.open !== undefined) {
45 | this.setState({ isOpen: nextProps.open });
46 | }
47 | }
48 |
49 | private get isControlled() {
50 | return this.props.open !== undefined;
51 | }
52 |
53 | toggle = (evt: React.MouseEvent) => {
54 | const { isOpen } = this.state;
55 | const nextOpen = !isOpen;
56 |
57 | if (!this.isControlled) {
58 | this.setState({ isOpen: nextOpen });
59 | }
60 |
61 | this.props.onChange && this.props.onChange(evt, nextOpen);
62 | };
63 |
64 | close = (evt: React.MouseEvent) => {
65 | const { isOpen } = this.state;
66 | const nextOpen = false;
67 |
68 | if (!this.isControlled && isOpen) {
69 | this.setState({ isOpen: nextOpen });
70 | }
71 |
72 | this.props.onChange && this.props.onChange(evt, nextOpen);
73 | };
74 |
75 | open = (evt: React.MouseEvent) => {
76 | const { isOpen } = this.state;
77 | const nextOpen = true;
78 |
79 | if (!this.isControlled && !isOpen) {
80 | this.setState({ isOpen: true });
81 | }
82 |
83 | this.props.onChange && this.props.onChange(evt, nextOpen);
84 | };
85 |
86 | private handePlaceholderClick = (e: React.MouseEvent) => {
87 | //TODO - consider stopping event propagation
88 | this.props.clickPlaceholderToggles && this.toggle(e);
89 |
90 | this.props.onPlaceholderToggle && this.props.onPlaceholderToggle(e);
91 | };
92 |
93 | private handleContainerClick = (e: React.MouseEvent) => {
94 | this.props.clickToggles && this.toggle(e);
95 |
96 | this.props.onClick && this.props.onClick(e);
97 | };
98 |
99 | private handleClickOutside = (e: React.MouseEvent) => {
100 | this.props.clickOutside && this.close(e);
101 |
102 | this.props.onClickOutside && this.props.onClickOutside(e);
103 | };
104 |
105 | private handleLeaveContainer = (e: React.MouseEvent) => {
106 | //TODO - add grace period
107 | this.props.hoverToOpen && this.close(e);
108 |
109 | this.props.onMouseLeave && this.props.onMouseLeave(e);
110 | };
111 |
112 | private handleEnterContainer = (e: React.MouseEvent) => {
113 | this.props.hoverToOpen && this.open(e);
114 |
115 | this.props.onMouseEnter && this.props.onMouseEnter(e);
116 | };
117 |
118 | render() {
119 | const {
120 | placeholder,
121 | children,
122 | PlaceholderComponent = DefaultPlaceholder,
123 | clickOutside,
124 |
125 | //replaced by handlers:
126 | onMouseEnter,
127 | onMouseLeave,
128 |
129 | //virtualProps (should not be included in 'rest')
130 | open,
131 | hoverToOpen,
132 |
133 | onChange,
134 | onPlaceholderToggle,
135 | onContaineeToggle,
136 | onClickOutside,
137 |
138 | ...rest
139 | } = this.props;
140 | const { isOpen } = this.state;
141 |
142 | return (
143 |
149 |
156 | {children}
157 |
158 | {placeholder}
159 |
160 |
161 |
162 | );
163 | }
164 | }
165 |
--------------------------------------------------------------------------------
/src/surfaces/drawer/index.ts:
--------------------------------------------------------------------------------
1 | export * from './drawer';
2 |
--------------------------------------------------------------------------------
/src/text/heading/heading.spec.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render } from "@testing-library/react";
3 | import { expect } from "chai";
4 |
5 | import { Heading } from "./heading";
6 |
7 | it("should render correct text in Heading", () => {
8 | const { getByText } = render(Heading);
9 | const rendered = getByText("Heading");
10 | expect(rendered).to.exist;
11 | });
12 |
13 | it("should render as h1 by default", () => {
14 | const { getByText } = render(h1 heading);
15 | const rendered = getByText("h1 heading");
16 | expect(rendered.tagName).to.be.equal("H1");
17 | });
18 |
19 | it("should render as h3 when defined", () => {
20 | const { getByText } = render(h3 heading);
21 | const rendered = getByText("h3 heading");
22 | expect(rendered.tagName).to.be.equal("H3");
23 | });
24 |
--------------------------------------------------------------------------------
/src/text/heading/heading.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export type HeadingProps = {
4 | /**
5 | * underlying html element ("h1", "h2", etc)
6 | */
7 | element?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6',
8 | } & React.HTMLAttributes;
9 |
10 | /**
11 | * Base title component, to be styled by composing components.
12 | * May have more logic in the future.
13 | * @example
14 | * This is a title
15 | */
16 | export function Heading(props: HeadingProps) {
17 | const { element, ...rest } = props;
18 | const Element = element || 'h1';
19 |
20 | return ;
21 | }
22 |
23 | Heading.defaultProps = {
24 | element: 'h1',
25 | };
26 |
--------------------------------------------------------------------------------
/src/text/heading/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./heading";
2 |
3 |
--------------------------------------------------------------------------------
/src/text/muted-text/index.ts:
--------------------------------------------------------------------------------
1 | export * from './muted-text';
2 |
--------------------------------------------------------------------------------
/src/text/muted-text/muted-text.module.scss:
--------------------------------------------------------------------------------
1 | .mutedText {
2 | color: var(--text-muted, #6c707c);
3 | }
4 |
--------------------------------------------------------------------------------
/src/text/muted-text/muted-text.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 |
4 | import styles from './muted-text.module.scss';
5 |
6 | /**
7 | * Text with muted (gray) color. Behaves like a regular *span* element.
8 | * Applies text color with css variable `--text-muted`
9 | * @name MutedText
10 | */
11 | export function MutedText(props: React.HTMLAttributes) {
12 | return ;
13 | }
14 |
15 | /**
16 | * Pure css class name, colors text as muted (gray).
17 | * Use this directly as a class name without creating a DOM element
18 | *
19 | * Colors derives from css variable `--text-muted`
20 | * @name mutedText
21 | */
22 | export const mutedText = styles.mutedText;
23 |
--------------------------------------------------------------------------------
/src/text/paragraph/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './paragraph';
2 |
--------------------------------------------------------------------------------
/src/text/paragraph/paragraph.module.scss:
--------------------------------------------------------------------------------
1 | // font sizes only!
2 |
3 | .xxs {
4 | font-size: var(--p-xxs, 12px);
5 | }
6 |
7 | .xs {
8 | font-size: var(--p-xs, 14px);
9 | }
10 |
11 | .sm {
12 | font-size: var(--p-sm, 15px);
13 | }
14 |
15 | .md {
16 | font-size: var(--p-md, 16px);
17 | }
18 |
19 | .lg {
20 | font-size: var(--p-lg, 18px);
21 | }
22 |
23 | .xl {
24 | font-size: var(--p-xl, 20px);
25 | }
26 |
27 | .xxl {
28 | font-size: var(--p-xxl, 24px);
29 | }
--------------------------------------------------------------------------------
/src/text/paragraph/paragraph.spec.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import { expect } from 'chai';
4 |
5 | import { Paragraph } from './paragraph';
6 | import { PossibleSizes } from '../../constants/sizes';
7 |
8 | it('should render', () => {
9 | const { getByText } = render(test text);
10 |
11 | const rendered = getByText('test text');
12 |
13 | expect(rendered).to.exist;
14 | });
15 |
16 | it('should render with different size', () => {
17 | const { getByText } = render(test text);
18 |
19 | const rendered = getByText('test text');
20 | // cannot test classnames with Mocha
21 | // expect(rendered.className).to.include('xs');
22 |
23 | expect(rendered).to.exist;
24 | });
--------------------------------------------------------------------------------
/src/text/paragraph/paragraph.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 |
4 | import { PossibleSizes } from '../../constants/sizes';
5 | import styles from './paragraph.module.scss';
6 |
7 | export type ParagraphProps = {
8 | /**
9 | * Font size (from a list of presets).
10 | */
11 | size: PossibleSizes,
12 | /**
13 | * The underlying html element
14 | */
15 | element: 'p' | 'div' | 'span',
16 | } & React.HTMLAttributes;
17 |
18 | /**
19 | * Paragraph component prototype. Accepts all properties of a native Paragraph element,
20 | * @name paragraph
21 | * @example
22 | * This is some text
23 | */
24 | export function Paragraph({ className, size, element: Element, ...rest }: ParagraphProps) {
25 | return (
26 |
31 | );
32 | }
33 |
34 | Paragraph.defaultProps = {
35 | size: 'md',
36 | element: 'p',
37 | };
38 |
--------------------------------------------------------------------------------
/src/text/text-separator/index.ts:
--------------------------------------------------------------------------------
1 | export * from './text-separator';
2 |
--------------------------------------------------------------------------------
/src/text/text-separator/text-separator.module.scss:
--------------------------------------------------------------------------------
1 | .textSeparator {
2 | display: flex;
3 | align-items: center;
4 | }
5 |
6 | .line {
7 | flex: 1 1 100%;
8 | border-bottom: 2px dashed var(--separator-color, #ededed);
9 |
10 | &:first-child {
11 | margin-right: 11px;
12 | }
13 |
14 | &:last-child {
15 | margin-left: 11px;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/text/text-separator/text-separator.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styles from './text-separator.module.scss';
3 | import classNames from 'classnames';
4 |
5 | /**
6 | * Separating line spanning the whole line, with room for text. Behaves like a regular `div` element.
7 | * Currently, there is no way to customize the border-style.
8 | *
9 | * Border color is applied from css variable `--separator-color`
10 | * @name TextSeparator
11 | */
12 | export function TextSeparator(props: React.HTMLAttributes) {
13 | const { children, className, ...rest } = props;
14 |
15 | return (
16 |
17 |
18 | {children}
19 |
20 |
I'm using font!
14 | * I am BOLD
15 | *
16 | */
17 |
18 | // default
19 | @font-face {
20 | font-family: "CircularPro";
21 | src: url($staticStorageUrl + '/fonts/CircularPro-Book.otf');
22 | }
23 |
24 | // bold
25 | @font-face {
26 | font-family: "CircularPro";
27 | src: url($staticStorageUrl + '/fonts/CircularPro-Bold.otf');
28 | font-weight: bold;
29 | }
30 |
31 | // // bold-er
32 | @font-face {
33 | font-family: "CircularPro";
34 | src: url($staticStorageUrl + '/fonts/CircularPro-Black.otf');
35 | font-weight: 800;
36 | }
37 |
38 | // italic
39 | @font-face {
40 | font-family: "CircularPro";
41 | src: url($staticStorageUrl + '/fonts/CircularPro-BookItalic.otf');
42 | font-style: italic;
43 | }
44 |
45 | // bold + italic
46 | @font-face {
47 | font-family: "CircularPro";
48 | src: url($staticStorageUrl + '/fonts/CircularPro-BoldItalic.otf');
49 | font-style: italic;
50 | font-weight: bold;
51 | }
52 |
53 | // bold-er + italic
54 | @font-face {
55 | font-family: "CircularPro";
56 | src: url($staticStorageUrl + '/fonts/CircularPro-BlackItalic.otf');
57 | font-style: italic;
58 | font-weight: 800;
59 | }
60 |
61 | .bookFont {
62 | font-family: "CircularPro", "Gill Sans", "Gill Sans MT", "Helvetica Neue", Helvetica, Arial, sans-serif;
63 | }
--------------------------------------------------------------------------------
/src/themes/brand-colors.module.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Sass variables for brands we use in the page.
3 | * ```scss
4 | * $twitter: #1da1f2;
5 | * $slack: #4a154b;
6 | * $github: #2b2b2b;
7 | * ```
8 | */
9 |
10 | $twitter: #1da1f2;
11 | $slack: #4a154b;
12 | $github: #2b2b2b;
--------------------------------------------------------------------------------
/src/themes/brand-definition.module.scss:
--------------------------------------------------------------------------------
1 | @import "./colors.module.scss";
2 |
3 | /**
4 | * css variables definition, for brand colors.
5 | * @example
6 | * {children}
7 | */
8 |
9 | .brands {
10 | --github-bg: #2b2b2b;
11 | --brand-text: #{$w10};
12 | --slack-bg: #4a154b;
13 | --twitter-bg: #1da1f2;
14 | }
--------------------------------------------------------------------------------
/src/themes/color-definition.module.scss:
--------------------------------------------------------------------------------
1 | @import './colors.module.scss';
2 |
3 | /**
4 | * CSS colors and variables for the app.
5 | *
6 | * - Sets default text color
7 | * - `--base-color` - default color (cta color, etc)
8 | * - `--base-highlight` - default color for highlight (cta hover, etc)
9 | * - `--border-color`
10 | * - `--bg-color` - background color
11 | * - `--separator-color`
12 | *
13 | * ### backgrounds:
14 | * As elements stacks closer to the user, its color changes. their color change.
15 | * This is especially noticeable in dark mode (higher elements are lighter).
16 | *
17 | * We created 4 levels of possible backgrounds, from bottom to top:
18 | * - `--bg-bedrock` - i.e. background
19 | * - `--bg-base` - e.g. navigation elements and wireframes
20 | * - `--bg-layer` - workspaces, e.g. card. (may be sub-divided in the future)
21 | * - `--bg-crust` - overlay ui, e.g. tooltip.
22 | * - `--bg-topping` - "bumps" on top level surfaces e.g. button, input, etc
23 | */
24 |
25 | .primaryPalette {
26 | color: $d50;
27 | --text-highlight: #{$d60};
28 | --text-color: #{$d50};
29 | --text-muted: #{$d40};
30 |
31 | --base-color: #{$p50};
32 | --base-highlight: #{$p60};
33 |
34 | --border-color: #{$d10};
35 | --bg-color: #{$w10};
36 | --separator-color: #{$d20};
37 |
38 | --muted-color: #{$p20}; //unsettled
39 | --muted-highlight: #{$p30}; //unsettled
40 |
41 | --error-color: #{$r50};
42 | --error-highlight: #{$r60};
43 | --bg-error: #{$r20};
44 |
45 | --bg-bedrock: #{$w10}; // i.e. background
46 | --bg-base: #{$w10}; // e.g. navigation
47 | --bg-layer: #{$w10}; // e.g. card
48 | --bg-crust: #{$w10}; // e.g. tooltip
49 | --bg-topping: #{$w10}; // e.g. button, input, etc
50 | --bg-topping-highlight: #{$w20};
51 | --bg-dent: #{$w20};
52 |
53 | // deprecated (overly specific):
54 | --primary-button-width: 199px;
55 | --primary-button-height: 46px;
56 | --cta-button-text: #{$w10};
57 | --primary-label-bg: #{$p50};
58 | --primary-label-text: #{$w10};
59 | --primary-label-width: 50px;
60 | }
61 |
--------------------------------------------------------------------------------
/src/themes/color-palette/color-palette.module.scss:
--------------------------------------------------------------------------------
1 | @import '../colors.module.scss';
2 |
3 | // brand colors
4 | .primary {
5 | --base-color: #{$p50};
6 | --base-highlight: #{$p60};
7 | }
8 |
9 | .secondary {
10 | --base-color: #{$b50};
11 | --base-highlight: #{$b60};
12 | }
13 |
14 | .complementary {
15 | --base-color: #{$pink50};
16 | --base-highlight: #{$pink60};
17 | }
18 |
19 | // intents
20 | .impulsive {
21 | --base-color: #{$r50};
22 | --base-highlight: #{$r60};
23 | }
24 |
25 | .hungry {
26 | --base-color: #{$y50};
27 | --base-highlight: #{$y60};
28 | }
29 |
30 | .success {
31 | --base-color: #{$g50};
32 | --base-highlight: #{$g60};
33 | }
34 |
35 | // weight
36 | .emphasized {
37 | --base-color: #{$d60};
38 | --base-highlight: #{$d70};
39 | }
40 |
41 | .neutral {
42 | --base-color: #{$d50};
43 | --base-highlight: #{$d60};
44 | }
45 |
46 | .muted {
47 | --base-color: #{$d40};
48 | --base-highlight: #{$d50};
49 |
50 | //unsettled:
51 | --bg-topping: #{$p20};
52 | --bg-topping-highlight: #{$p30};
53 | }
54 |
--------------------------------------------------------------------------------
/src/themes/color-palette/index.ts:
--------------------------------------------------------------------------------
1 | import colorStyles from './color-palette.module.scss';
2 |
3 | /**
4 | * Sets the `--base-color` and `--base-highlight` for the specific use case.
5 | * Effects the color of many elements, such as `` and `
4 |
5 | # Base component design system of Bit.dev
6 |
7 | The [reusable set of infra-level React components](https://bit.dev/bit/base-ui)
8 | used to build [Bit.dev](https://bit.dev).
9 |
10 | 
11 |
12 |
13 | ## Components
14 |
15 | All components in this frontend codebase were [contained and exposed using Bit](https://github.com/teambit/bit) as a set of independently-usable components. See the **[base collection on bit.dev](https://bit.dev/teambit/base-ui)** to explore and integrate any component into your project.
16 |
17 | - Install independent components with npm/yarn.
18 | - Use `bbit import` to source and edit components locally for quick editing and integration.
19 | - Try any component hands-on in a live playground.
20 |
21 |
22 | ## This is a component-based micro-frontend
23 |
24 | Wait.. what?
25 |
26 | - Install independent components with `bbit install`
27 | - Use `bbit import` to explore components in your local workspace and modify them to your own needs.
28 | - Try any component hands-on in the docs' live playground and in the 'compositions' page.
29 |
30 | ### Show me an example!
31 |
32 | Take a look at the [bit.dev homepage](https://bit.dev/).
33 |
34 | You will notice that it's built from components that live in different front-end codebases:
35 |
36 | - ["Evangelist" marketing components](https://github.com/teambit/evangelist).
37 | - [base-ui components](https://github.com/teambit/base-ui).
38 | - Container application (private).
39 | - etc
40 |
41 | We use [Bit](https://github.com/teambit/bit) to contain and expose components from any codebase as a set of APIs in [bit.dev](https://bit.dev) that can be integrated into different pages and applications. For example:
42 |
43 | - Exposed ["Evangelist" marketing components] on bit.dev.
44 | - Exposed [base-ui components on bit.dev](https://bit.dev/teambit/base-ui).
45 |
46 |
47 | ## Structure:
48 |
49 | ### Theme
50 | All shared styles, colors, sizes, fonts, and css variables, belong here.
51 | [Theme-provider](https://bit.dev/teambit/base-ui/theme/theme-provider) applies all of these styles at the root of your app, and different apps may implement their own unique theme.
52 |
53 | ### Constants
54 | Hard coded singleton values, like storage-url and enums. In case of change, this central location could update all other components.
55 |
56 | ### Layout
57 | Components controlling the position of elements in the document. (Grid, breakpoints, etc)
58 |
59 | ### Atoms
60 | Generic building blocks for any front end application.
61 | These components are 'vanilla', meaning they should not contain content (like texts or icons) and no specific styles. This is because different designs could look entirely different, so any styles in the base component could lead to a 'CSS Specificity War'. So, add the bare minimum of css here and keep these components purely logical!
62 |
63 | ### Utils
64 | Pure logic components and helpers. (no visual components)
65 |
66 | ## Setup
67 | 1. Install Bit: `npm install @teambit/bit --global`
68 | 2. Clone this Bit Workspace: `git clone https://github.com/teambit/evangelist.git evangelist`
69 | 3. Go to the workspace directory: `cd evangelist`
70 | 4. Install all packages and import all components: `bbit install`
71 | 5. Run the Workspace UI to explore the Evangalist components: `bbit start` and go to https://localhost:3000
72 | 6. Enjoy!
73 |
--------------------------------------------------------------------------------
/docs/scope-screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/teambit/base-ui/268e0473497f15040a026dc2281faa8572217b0b/docs/scope-screenshot.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "base-ui",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "start": "react-scripts start",
7 | "build": "react-scripts build",
8 | "test": "react-scripts test",
9 | "eject": "react-scripts eject"
10 | },
11 | "eslintConfig": {
12 | "extends": "react-app"
13 | },
14 | "browserslist": {
15 | "production": [
16 | ">0.2%",
17 | "not dead",
18 | "not op_mini all"
19 | ],
20 | "development": [
21 | "last 1 chrome version",
22 | "last 1 firefox version",
23 | "last 1 safari version"
24 | ]
25 | },
26 | "dependencies": {
27 | "@bit/bit.base-ui.ellipsis": "^1.1.7",
28 | "@popperjs/core": "~2.3.3",
29 | "@testing-library/jest-dom": "^4.2.4",
30 | "@testing-library/react": "^9.3.2",
31 | "@testing-library/user-event": "^7.1.2",
32 | "classnames": "^2.2.6",
33 | "lodash.debounce": "^4.0.8",
34 | "node-sass": "^4.13.1",
35 | "number-abbreviate": "^2.0.0",
36 | "react": "^16.x.x",
37 | "react-create-ref": "^1.0.1",
38 | "react-dom": "^16.x.x",
39 | "react-onclickoutside": "^6.9.0",
40 | "react-scripts": "3.4.0",
41 | "react-slick": "^0.25.2",
42 | "reset-css": "^5.0.1",
43 | "resize-observer-polyfill": "^1.5.1",
44 | "typescript": "^3.8.3"
45 | },
46 | "devDependencies": {
47 | "@types/chai": "^4.2.8",
48 | "@types/classnames": "^2.2.9",
49 | "@types/lodash.debounce": "^4.0.6",
50 | "@types/mocha": "^7.0.2",
51 | "@types/node": "^12.0.0",
52 | "@types/react": "^16.x.x",
53 | "@types/react-dom": "^16.x.x",
54 | "@types/react-onclickoutside": "^6.7.3",
55 | "@types/react-slick": "^0.23.4",
56 | "@types/sinon": "^7.5.1",
57 | "chai": "^4.2.0",
58 | "eslint-plugin-chai-friendly": "^0.5.0",
59 | "mocha": "^7.0.1",
60 | "sinon": "^8.1.1"
61 | },
62 | "bit": {
63 | "env": {
64 | "compiler": "bit.envs/compilers/react-typescript@3.1.43",
65 | "tester": "bit.envs/testers/mocha@5.0.2"
66 | },
67 | "componentsDefaultDirectory": "src/bit-components/{name}",
68 | "defaultScope": "bit.base-ui",
69 | "packageManager": "yarn",
70 | "overrides": {
71 | "*": {
72 | "dependencies": {
73 | "react": "-",
74 | "react-dom": "-"
75 | },
76 | "devDependencies": {
77 | "@types/chai": "^4.2.8",
78 | "@types/sinon": "^7.5.1",
79 | "@types/mocha": "^5.0.0",
80 | "chai": "^4.2.0",
81 | "sinon": "^8.1.1"
82 | },
83 | "env": {
84 | "compiler": {
85 | "bit.envs/compilers/react-typescript@3.1.43": {
86 | "rawConfig": {
87 | "tsconfig": {
88 | "compilerOptions": {
89 | "target": "ES5",
90 | "module": "CommonJS",
91 | "inlineSourceMap": true,
92 | "removeComments": false,
93 | "experimentalDecorators": true
94 | }
95 | }
96 | }
97 | }
98 | }
99 | }
100 | }
101 | }
102 | }
103 | }
104 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/teambit/base-ui/268e0473497f15040a026dc2281faa8572217b0b/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 |