Alerts can be position at the top of the page or into other components. 4 | 5 |
9 | 
15 |
16 |
15 |
8 | Hello world
9 |
10 |
9 |
12 |
13 |
9 |
25 |
26 |
8 |
14 |
15 |
9 |
23 |
12 |
22 |
15 |
21 |
18 | Render snapshot
19 |
20 |
9 |
12 |
13 |
22 | {children}
23 | {copy &&
25 | ) : (
26 |
27 |
6 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/website/components/Display.js:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 |
3 | export default function Display({ icon, children }) {
4 | return (
5 |
7 |
22 | -
8 |
- 9 | Getting Started 10 | 11 |
Components
14 | -
15 | {components.map((item, index) => (
16 |
- 17 | {item} 18 | 19 | ))} 20 |
6 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/website/components/Nav.js:
--------------------------------------------------------------------------------
1 | import { useRouter } from 'next/router';
2 | import Link from 'next/link';
3 |
4 | import cx from 'classnames';
5 |
6 | export default function Nav({ items }) {
7 | const { asPath } = useRouter();
8 |
9 | const navList = items.map((item, index) => {
10 | const navItem = (
11 |
16 | {item.label}
17 |
18 | );
19 |
20 | return (
21 |
7 |
9 | {children}
10 |
6 |
7 | {type === 'preview' ? 'Previous' : 'Next'}
8 | {page}
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/website/components/Roadmap.js:
--------------------------------------------------------------------------------
1 | import Tag from '../components/Tag';
2 |
3 | export default function RoadMap({ data }) {
4 | const listItems = data.map((item, index) => {
5 | if (item.length < 2) {
6 | return;
7 | }
8 |
9 | const [component, tag] = item;
10 |
11 | let appearance;
12 | switch (tag) {
13 | case 'beta':
14 | appearance = 'beta';
15 | break;
16 | case 'ready':
17 | appearance = 'ready';
18 | break;
19 |
20 | default:
21 | appearance = undefined;
22 | break;
23 | }
24 |
25 | return (
26 | - {listItems}
12 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/website/components/icons/Check.js:
--------------------------------------------------------------------------------
1 | export default function Check() {
2 | return (
3 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/website/components/icons/Copy.js:
--------------------------------------------------------------------------------
1 | export default function Copy() {
2 | return (
3 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/website/components/icons/index.js:
--------------------------------------------------------------------------------
1 | export { default as Copy } from './Copy';
2 | export { default as Check } from './Check';
3 |
--------------------------------------------------------------------------------
/website/example/ActionMenu.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ActionMenu from '@igloo-ui/action-menu';
3 | import Button from '@igloo-ui/button';
4 |
5 | const Example = () => {
6 | return (
7 |
13 |
16 | Quick nav
14 | - {toc}
8 | {
25 | return (
26 |
29 | );
30 | }}
31 | />
32 |
33 | );
34 | };
35 |
36 | export default Example;
37 |
--------------------------------------------------------------------------------
/website/example/Alert.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Alert from '@igloo-ui/alert';
3 |
4 | const Example = () => {
5 | const handleClick = (event) => {
6 | console.log('Go to integration event', event);
7 | };
8 |
9 | return (
10 |
11 |
21 | );
22 | };
23 |
24 | export default Example;
25 |
--------------------------------------------------------------------------------
/website/example/Avatar.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Avatar from '@igloo-ui/avatar';
3 |
4 | const Example = () => {
5 | return (
6 |
7 |
9 | );
10 | };
11 |
12 | export default Example;
13 |
--------------------------------------------------------------------------------
/website/example/BarChart.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import BarChart from '@igloo-ui/bar-chart';
3 |
4 | const Example = () => {
5 | const data = [
6 | {
7 | label: 'Good vibes',
8 | value: 48,
9 | color: '#FBC73B',
10 | },
11 | {
12 | label: 'Excellence',
13 | value: 46,
14 | color: '#1053FF',
15 | },
16 | {
17 | label: 'Radical candor',
18 | value: 24,
19 | color: '#E7919A',
20 | },
21 | {
22 | label: 'Custom cards by members',
23 | value: 0,
24 | color: '#B2DDF2',
25 | },
26 | ];
27 | return (
28 |
29 |
31 | );
32 | };
33 |
34 | export default Example;
35 |
--------------------------------------------------------------------------------
/website/example/Breadcrumb.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Breadcrumb from '@igloo-ui/breadcrumb';
3 |
4 | const Example = () => {
5 | return (
6 |
7 |
23 | );
24 | };
25 |
26 | export default Example;
27 |
--------------------------------------------------------------------------------
/website/example/Button.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Button from '@igloo-ui/button';
3 |
4 | const Example = () => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
15 |
18 |
19 | );
20 | };
21 |
22 | export default Example;
23 |
--------------------------------------------------------------------------------
/website/example/ButtonGroup.demo.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import ButtonGroup, { ButtonItem } from '@igloo-ui/button-group';
3 |
4 | const Example = () => {
5 | const [active, setActive] = useState('score');
6 |
7 | return (
8 |
9 |
10 | setActive('score')}
13 | >
14 | Score
15 |
16 | setActive('variation')}
19 | >
20 | Variation
21 |
22 |
23 |
24 | );
25 | };
26 |
27 | export default Example;
28 |
--------------------------------------------------------------------------------
/website/example/Card.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Card from '@igloo-ui/card';
3 |
4 | const Example = () => {
5 | return (
6 |
7 |
8 |
14 |
15 | );
16 | };
17 |
18 | export default Example;
19 |
--------------------------------------------------------------------------------
/website/example/Checkbox.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Checkbox from '@igloo-ui/checkbox';
3 |
4 | const Example = () => {
5 | return (
6 | Share resources
9 | 10 | Let your team access the most important resources they need for their 11 | work here. 12 | 13 |
7 |
17 | );
18 | };
19 |
20 | export default Example;
21 |
--------------------------------------------------------------------------------
/website/example/Color.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Color from '@igloo-ui/color';
3 |
4 | const Example = () => {
5 | return (
6 |
8 | Teams
9 |
16 |
10 | Groupe #1
11 | Groupe #2
12 | Groupe #3
13 | Groupe #4
14 |
15 |
7 |
14 | );
15 | };
16 |
17 | export default Example;
18 |
--------------------------------------------------------------------------------
/website/example/ColorPicker.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ColorPicker from '@igloo-ui/color-picker';
3 |
4 | const Example = () => {
5 | const [selectedColor, setSelectedColor] = React.useState("dandelion200");
6 |
7 | return (
8 |
9 | {
12 | setSelectedColor(color);
13 | }
14 | }
15 | selectedColor={selectedColor}
16 | />
17 |
18 | );
19 | };
20 |
21 | export default Example;
22 |
--------------------------------------------------------------------------------
/website/example/Combobox.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Combobox from '@igloo-ui/combobox';
4 |
5 | const optionList = [
6 | {
7 | label: 'Text 1',
8 | value: '1',
9 | },
10 | {
11 | label: 'Text 2 (disabled)',
12 | value: '2',
13 | disabled: true,
14 | },
15 | {
16 | label:
17 | 'Text 3. I will put a lot of text here to see how it behaves. Hopefully it looks good!',
18 | value: '3',
19 | color: '#74DCC9',
20 | },
21 | ];
22 |
23 | const Example = () => {
24 | return (
25 |
26 |
33 | Place holder text
34 |
35 |
36 | );
37 | };
38 |
39 | export default Example;
40 |
--------------------------------------------------------------------------------
/website/example/Dialog.demo.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | import Dialog from '@igloo-ui/dialog';
4 | import Button from '@igloo-ui/button';
5 |
6 | const Example = () => {
7 | const [open, setOpen] = useState(false);
8 | const handleValidate = () => {
9 | alert('You said yes');
10 | setOpen(false);
11 | };
12 |
13 | return (
14 |
15 |
18 |
28 | );
29 | };
30 |
31 | export default Example;
32 |
--------------------------------------------------------------------------------
/website/example/Disclosure.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Substract from '@igloo-ui/icons/dist/Substract';
3 |
4 | import Disclosure from '@igloo-ui/disclosure';
5 |
6 | const Example = () => {
7 | return (
8 |
9 |
19 | );
20 | };
21 |
22 | export default Example;
23 |
--------------------------------------------------------------------------------
/website/example/Ellipsis.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Ellipsis from '@igloo-ui/ellipsis';
3 |
4 | const Example = () => {
5 | return (
6 |
15 | Our organization values diversity.
16 |
17 |
18 |
7 | Promoters in your organization (eNPS)
8 |
9 | );
10 | };
11 |
12 | export default Example;
13 |
--------------------------------------------------------------------------------
/website/example/Filter.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Filter from '@igloo-ui/filter';
3 |
4 | const Example = () => {
5 | const [selected, setSelected] = React.useState(false);
6 | return (
7 |
8 | {
10 | setSelected(!selected);
11 | alert('Filter was clicked');
12 | }}
13 | selected={selected}
14 | >
15 | Assigned to me (5)
16 |
17 |
18 | );
19 | };
20 |
21 | export default Example;
22 |
--------------------------------------------------------------------------------
/website/example/FormGroup.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import FormGroup from '@igloo-ui/form-group';
3 | import Input from '@igloo-ui/input';
4 |
5 | const Example = () => {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 | );
13 | };
14 |
15 | export default Example;
16 |
--------------------------------------------------------------------------------
/website/example/HelperText.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import HelperText from '@igloo-ui/helper-text';
3 |
4 | const Example = () => {
5 | return (
6 |
7 | Try to add details, give concrete examples.
8 | Organization name is required
9 |
10 | );
11 | };
12 |
13 | export default Example;
14 |
--------------------------------------------------------------------------------
/website/example/Hyperlink.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Hyperlink from '@igloo-ui/hyperlink';
3 | import Expand from '@igloo-ui/icons/dist/Expand';
4 |
5 | const Example = () => {
6 | return (
7 |
8 | View complete report
9 |
13 | );
14 | };
15 |
16 | export default Example;
17 |
--------------------------------------------------------------------------------
/website/example/IconButton.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import IconButton from '@igloo-ui/icon-button';
3 |
4 | import Plus from '@igloo-ui/icons/dist/Plus';
5 | import Settings from '@igloo-ui/icons/dist/Settings';
6 | import Edit from '@igloo-ui/icons/dist/Edit';
7 |
8 | const Example = () => {
9 | return (
10 |
11 |
15 | );
16 | };
17 |
18 | export default Example;
19 |
--------------------------------------------------------------------------------
/website/example/Input.demo.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import Input from '@igloo-ui/input';
3 |
4 | const Example = () => {
5 | const [name, setName] = useState('');
6 |
7 | return (
8 |
9 | setName(event.target.value)}
11 | value={name}
12 | placeholder="First name"
13 | />
14 |
15 | );
16 | };
17 |
18 | export default Example;
19 |
--------------------------------------------------------------------------------
/website/example/Metric.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Metric from '@igloo-ui/metric';
3 | import Wellness from '@igloo-ui/icons/dist/Wellness';
4 |
5 | const Example = () => {
6 | const [selected, setSelected] = React.useState(false);
7 | const handleOnPress = () => {
8 | setSelected(!selected);
9 | }
10 |
11 | return (
12 |
14 |
23 | );
24 | };
25 |
26 | export default Example;
27 |
--------------------------------------------------------------------------------
/website/example/OptionButton.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import OptionButton from '@igloo-ui/option-button';
3 |
4 | const Example = () => {
5 | return (
6 |
7 |
13 | Multiple Choice
14 |
15 |
16 | );
17 | };
18 |
19 | export default Example;
20 |
--------------------------------------------------------------------------------
/website/example/Pager.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Pager from '@igloo-ui/pager';
3 |
4 | const Example = () => {
5 | const [currentPage, setCurrentPage] = React.useState(1);
6 | return (
7 |
8 | setCurrentPage(page)}
13 | />
14 |
15 | );
16 | };
17 |
18 | export default Example;
19 |
--------------------------------------------------------------------------------
/website/example/PieChart.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import tokens from '@igloo-ui/tokens/dist/base10/tokens.json';
3 | import PieChart from '@igloo-ui/pie-chart';
4 |
5 | const Example = () => {
6 | const mockData = [
7 | { id: 'positive', percentage: 25, color: tokens.seaweed400 },
8 | { id: 'negative', percentage: 10, color: tokens.coral400 },
9 | { id: 'skipped', percentage: 40, color: tokens.creamsicle100 },
10 | { id: 'unanswered', percentage: 25, color: tokens.grey300 },
11 | ];
12 |
13 | return (
14 |
15 |
17 | );
18 | };
19 |
20 | export default Example;
21 |
--------------------------------------------------------------------------------
/website/example/ProgressBar.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ProgressBar from '@igloo-ui/progress-bar';
3 |
4 | const Example = () => {
5 | return (
6 |
7 |
12 | );
13 | };
14 |
15 | export default Example;
16 |
--------------------------------------------------------------------------------
/website/example/Tag.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Tag from '@igloo-ui/tag';
3 | import LabelSolid from '@igloo-ui/icons/dist/LabelSolid';
4 |
5 | const Example = () => {
6 | return (
7 |
8 |
12 | );
13 | };
14 |
15 | export default Example;
16 |
--------------------------------------------------------------------------------
/website/example/TextEditor.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import TextEditor from '@igloo-ui/text-editor';
3 |
4 | const Example = () => {
5 | return (
6 |
7 |
9 | );
10 | };
11 |
12 | export default Example;
13 |
--------------------------------------------------------------------------------
/website/example/Textarea.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Textarea from '@igloo-ui/textarea';
3 |
4 | const Example = () => {
5 | return (
6 |
7 |
8 |
9 | );
10 | };
11 |
12 | export default Example;
13 |
--------------------------------------------------------------------------------
/website/example/Toaster.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Button from '@igloo-ui/button';
3 | import Toaster, { toast } from '@igloo-ui/toaster';
4 |
5 | const Example = () => {
6 | return (
7 |
8 |
9 |
14 |
15 |
17 | );
18 | };
19 |
20 | export default Example;
21 |
--------------------------------------------------------------------------------
/website/example/Toggle.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Toggle from '@igloo-ui/toggle';
3 |
4 | const Example = () => {
5 | return (
6 |
7 | Administrator
8 |
9 | );
10 | };
11 |
12 | export default Example;
13 |
--------------------------------------------------------------------------------
/website/example/Tooltip.demo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Tooltip from '@igloo-ui/tooltip';
3 | import IconButton from '@igloo-ui/icon-button';
4 | import Settings from '@igloo-ui/icons/dist/Settings';
5 |
6 | const Example = () => {
7 | return (
8 |
9 |
10 |
16 |
17 | );
18 | };
19 |
20 | export default Example;
21 |
--------------------------------------------------------------------------------
/website/lib/ga/index.js:
--------------------------------------------------------------------------------
1 | export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;
2 |
3 | // log the pageview with their URL
4 | export const pageview = (url) => {
5 | window.gtag('config', GA_TRACKING_ID, {
6 | page_path: url,
7 | });
8 | };
9 |
10 | // log specific events happening.
11 | export const event = ({ action, category, label, value }) => {
12 | window.gtag('event', action, {
13 | event_category: category,
14 | event_label: label,
15 | value: value,
16 | });
17 | };
18 |
--------------------------------------------------------------------------------
/website/lib/gtm.js:
--------------------------------------------------------------------------------
1 | export const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID;
2 |
3 | export const pageview = (url) => {
4 | window.dataLayer.push({
5 | event: 'pageview',
6 | page: url,
7 | });
8 | };
9 |
--------------------------------------------------------------------------------
/website/navigation.js:
--------------------------------------------------------------------------------
1 | export const link = {
2 | TOKENS: '/tokens',
3 | ICONS: '/icons',
4 | COMPONENTS: '/component',
5 | GETTING_STARTED: '/component/getting-started',
6 | STORYBOOK: '/storybook',
7 | };
8 |
9 | export const nav = [
10 | {
11 | link: link.TOKENS,
12 | label: 'Tokens',
13 | },
14 | {
15 | link: link.ICONS,
16 | label: 'Icons',
17 | },
18 | {
19 | link: link.COMPONENTS,
20 | label: 'Components',
21 | },
22 | ];
23 |
--------------------------------------------------------------------------------
/website/next.config.js:
--------------------------------------------------------------------------------
1 | const withMDX = require('@next/mdx')({
2 | extension: /\.mdx?$/,
3 | options: {
4 | providerImportSource: '@mdx-js/react',
5 | },
6 | });
7 |
8 | const withBundleAnalyzer = require('@next/bundle-analyzer')({
9 | enabled: process.env.ANALYZE === 'true',
10 | });
11 |
12 | const path = require('path');
13 |
14 | module.exports = withBundleAnalyzer(
15 | withMDX({
16 | transpilePackages: ['@igloo-ui'],
17 | reactStrictMode: true,
18 | sassOptions: {
19 | includePaths: [path.join(__dirname, 'styles')],
20 | },
21 | })
22 | );
23 |
--------------------------------------------------------------------------------
/website/pages/_document.js:
--------------------------------------------------------------------------------
1 | import { Html, Main, Head, NextScript } from 'next/document';
2 | import { GTM_ID } from '../lib/gtm';
3 | export default function Document() {
4 | return (
5 |
6 |