Skip to content
Permalink
Browse files

feat: ComponentHeader component, component overview fixes, more (#20)

* fix: swap default theme light/dark token

* feat: add breadcrumb component

* chore: shuffling components folder around

also shuffled templates folder in layout, so it's correctly named

* chore: remove console.log

* chore: tweak scripts and circle build for perf

* fix(website): lint errors

* feat(theme-tokens): add lineHeight80

* chore(website): remove non-functional component wrapper

* chore(website): shuffle grid folder into component file

* chore(website): minor cleanup

* feat(website): add ComponentHeader component

* chore(website): make ComponentHeader a shortcode

* fix(website): component overview page

* fix(website): sidebar border-edge pixel perfection

* fix(website): sidebar, header, nav fixes

* fix(website): fix type-check errors

* fix(website): guard window for ssr

* fix(design-tokens): type-checking

* chore(website): typo and remove unused file

* fix(circleci): add missing attach_workspace

* fix(now): add website build step

* fix: code review tweaks

* fix: typescript and rebase fixes

* fix: table type-checking

* fix: add missing dependency

* fix(text): re-add margin

* fix: run type-check in build step

* fix(theme-tokens): re-add clean step in build step

* fix: use tokens

* fix: use tokens on breadcrumb styles
  • Loading branch information...
TheSisb committed Aug 14, 2019
1 parent 74f12d1 commit 875e124aa4822d66cd503b1da8d679868d808137
Showing with 522 additions and 270 deletions.
  1. +8 −4 .circleci/config.yml
  2. +5 −0 now-build.sh
  3. +2 −2 now.json
  4. +5 −6 package.json
  5. +1 −1 packages/paste-core/utilities/box/package.json
  6. +1 −1 packages/paste-core/utilities/screen-reader-only/package.json
  7. +1 −1 packages/paste-core/utilities/text/package.json
  8. +7 −6 packages/paste-design-tokens/formatters/sketchpalette.ts
  9. +2 −2 packages/paste-design-tokens/tokens/global/border-color.yml
  10. +1 −1 packages/paste-icons/package.json
  11. +1 −1 packages/paste-theme-tokens/package.json
  12. +1 −0 packages/paste-theme-tokens/src/default/index.ts
  13. +1 −0 packages/paste-theme-tokens/src/sendgrid/index.ts
  14. +3 −2 packages/paste-theme/package.json
  15. +1 −2 packages/paste-website/gatsby-config.js
  16. +1 −0 packages/paste-website/package.json
  17. +35 −0 packages/paste-website/src/components/breadcrumb/index.tsx
  18. +3 −5 packages/paste-website/src/components/callout/types.ts
  19. +43 −26 packages/paste-website/src/components/component-overview-table/index.tsx
  20. +0 −28 packages/paste-website/src/components/header/index.tsx
  21. +0 −33 packages/paste-website/src/components/header/styles.ts
  22. +2 −2 packages/paste-website/src/components/{svg/twilio-icon.tsx → icons/TwilioIcon.tsx}
  23. +3 −5 packages/paste-website/src/components/input/index.tsx
  24. +2 −0 packages/paste-website/src/components/label/index.tsx
  25. +0 −9 packages/paste-website/src/components/mdx/index.tsx
  26. +6 −2 packages/paste-website/src/components/{mdx/mdx-provider → paste-mdx-provider}/index.tsx
  27. +96 −0 packages/paste-website/src/components/shortcodes/ComponentHeader.tsx
  28. +59 −0 packages/paste-website/src/components/sidebar/Header.tsx
  29. +5 −2 packages/paste-website/src/components/{navigation/styles.ts → sidebar/Navigation.styles.ts}
  30. +35 −25 packages/paste-website/src/components/{navigation/index.tsx → sidebar/Navigation.tsx}
  31. +13 −7 packages/paste-website/src/components/sidebar/index.tsx
  32. +3 −8 packages/paste-website/src/components/{default-site-wrapper → site-wrapper}/index.tsx
  33. +3 −1 packages/paste-website/src/components/{default-site-wrapper → site-wrapper}/styles.ts
  34. +4 −5 packages/paste-website/src/components/table/index.tsx
  35. 0 packages/paste-website/src/components/{token-example → tokens-example}/index.tsx
  36. +3 −3 packages/paste-website/src/components/tokens-list/index.tsx
  37. +15 −0 packages/paste-website/src/constants.ts
  38. +20 −0 packages/paste-website/src/layouts/DefaultLayout.tsx
  39. +1 −0 packages/paste-website/src/layouts/README.md
  40. +36 −16 packages/paste-website/src/pages/components/button/index.mdx
  41. +37 −9 packages/paste-website/src/pages/components/index.mdx
  42. +18 −6 packages/paste-website/src/pages/getting-started/index.mdx
  43. +1 −1 packages/paste-website/src/pages/index.tsx
  44. +8 −0 packages/paste-website/src/pages/utilities/box/index.mdx
  45. +9 −8 packages/paste-website/src/pages/utilities/index.mdx
  46. +0 −19 packages/paste-website/src/templates/components.tsx
  47. +0 −19 packages/paste-website/src/templates/index.tsx
  48. +19 −0 packages/paste-website/src/utils/RouteUtils.ts
  49. +2 −2 yarn.lock
@@ -26,16 +26,18 @@ jobs:
paths:
- node_modules
- run:
name: Run build
name: Run package builds
command: yarn build
- run:
name: Build monorepo package cache
command: yarn pre-test
name: Run website build
command: yarn build:website
- run:
name: Run type checker
command: yarn type-check
- persist_to_workspace:
root: ~/
paths:
- repo/packages
- repo/tools/.cache

test:
executor: job-executor
@@ -71,6 +73,8 @@ jobs:
keys:
- v1-dependencies-{{ checksum "package.json" }}
- v1-dependencies-
- attach_workspace:
at: ~/
- run:
name: Run prettier
command: yarn prettier
@@ -0,0 +1,5 @@
#!/bin/sh

yarn
yarn build
yarn build:website
@@ -4,9 +4,9 @@
"version": 2,
"builds": [
{
"src": "package.json",
"src": "now-build.sh",
"use": "@now/static-build",
"config": { "distDir": "packages/paste-website/public" }
"config": {"distDir": "packages/paste-website/public"}
}
]
}
@@ -19,26 +19,26 @@
"start:website": "yarn workspace @twilio-paste/website develop",
"watch:icons": "yarn workspace @twilio-paste/icons watch",
"prebuild": "node ./tools/build/pre-build.js",
"build": "lerna run build",
"build": "lerna run build --ignore @twilio-paste/website",
"build:dev": "yarn prebuild && yarn build:tokens && lerna run build:dev",
"build:tokens": "yarn workspace @twilio-paste/design-tokens tokens",
"build:icons": "yarn workspace @twilio-paste/icons build",
"build:storybook": "build-storybook -c .storybook -o /docs",
"build:website": "yarn workspace @twilio-paste/website build",
"pre-push": "yarn build && concurrently \"yarn:lint\" \"yarn:test\" \"yarn:prettier\"",
"pre-push": "concurrently \"yarn:lint\" \"yarn:test\" \"yarn:prettier\" \"yarn:type-check\"",
"release": "yarn lerna publish --skip-npm",
"clean": "node ./tools/build/clean-repo.js && lerna clean --yes && lerna run clean && yarn bootstrap",
"pre-test": "node ./tools/build/pre-test.js",
"test": "yarn pre-test && node --experimental-worker ./node_modules/.bin/jest",
"test:coverage": "yarn pre-test && node --experimental-worker ./node_modules/.bin/jest --coverage",
"prettier": "prettier --list-different '{.storybook,packages}/**/*.{ts,tsx}'",
"prettier-clean": "prettier --write '{.storybook,packages}/**/*.{ts,tsx}'",
"lint": "eslint --ext .tsx,.ts ./packages/**",
"lint": "yarn pre-test && eslint --ext .tsx,.ts ./packages/**",
"type-check": "lerna run type-check"
},
"dependencies": {
"@emotion/core": "^10.0.14",
"@emotion/styled": "^10.0.14",
"@emotion/core": "^10.0.15",
"@emotion/styled": "^10.0.15",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-uid": "^2.2.0",
@@ -56,7 +56,6 @@
"@commitlint/cli": "8.0.0",
"@commitlint/config-conventional": "8.0.0",
"@emotion/babel-preset-css-prop": "^10.0.14",
"@emotion/core": "^10.0.14",
"@expo/spawn-async": "^1.5.0",
"@storybook/addon-actions": "^5.1.9",
"@storybook/addon-info": "^5.1.9",
@@ -25,7 +25,7 @@
},
"peerDependencies": {
"@emotion/styled": "^10.0.10",
"@twilio-paste/theme-tokens": "^0.2.2",
"@twilio-paste/theme-tokens": "^0.4.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-system": "^4.1.0"
@@ -1,6 +1,6 @@
{
"name": "@twilio-paste/screen-reader-only",
"version": "0.0.0",
"version": "0.0.1",
"category": "typography",
"status": "alpha",
"description": "",
@@ -25,7 +25,7 @@
},
"peerDependencies": {
"@emotion/styled": "^10.0.10",
"@twilio-paste/theme-tokens": "^0.2.2",
"@twilio-paste/theme-tokens": "^0.4.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-system": "^4.1.0"
@@ -1,13 +1,13 @@
import color from 'color';
import * as color from 'color';
import * as Immutable from 'immutable';
import {ImmutableStyleMap} from 'theo';

interface SketchPaletteColor {
name: string;
red?: number;
green?: number;
blue?: number;
alpha?: number;
red: number;
green: number;
blue: number;
alpha: number;
}

interface ColorRGB {
@@ -16,7 +16,8 @@ interface ColorRGB {
valpha: string;
}

const convertToSketchPaletteColor = (input: string): Partial<SketchPaletteColor> => {
const convertToSketchPaletteColor = (input: string): {[key: string]: number} => {
// @ts-ignore FIXME
const convertedColor: ColorRGB = color.rgb(input);

return {
@@ -9,10 +9,10 @@ props:
value: "{!palette-gray-50}"
comment: Default border color
color-border-light:
value: "{!palette-gray-60}"
value: "{!palette-gray-40}"
comment: Light border color
color-border-dark:
value: "{!palette-gray-40}"
value: "{!palette-gray-60}"
comment: Dark border color

# input borders
@@ -21,7 +21,7 @@
},
"peerDependencies": {
"@emotion/styled": "^10.0.14",
"@twilio-paste/theme-tokens": "^0.2.2",
"@twilio-paste/theme-tokens": "^0.4.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-uid": "^2.2.0",
@@ -22,7 +22,7 @@
"type-check": "tsc --noEmit"
},
"peerDependencies": {
"@twilio-paste/design-tokens": "^2.0.2"
"@twilio-paste/design-tokens": "^2.2.0"
},
"devDependencies": {
"@twilio-paste/design-tokens": "^2.2.0",
@@ -24,6 +24,7 @@ const lineHeights = {
lineHeight50: '1.75rem', // #28px
lineHeight60: '2rem', // #32px
lineHeight70: '2.25rem', // #36px
lineHeight80: '2.5rem', // #40px
};
const maxWidths = {
...sizings,
@@ -24,6 +24,7 @@ const lineHeights = {
lineHeight50: '1.75rem', // #28px
lineHeight60: '2rem', // #32px
lineHeight70: '2.25rem', // #36px
lineHeight80: '2.5rem', // #40px
};
const maxWidths = {
...sizings,
@@ -22,17 +22,18 @@
"type-check": "tsc --noEmit"
},
"dependencies": {
"@twilio-paste/theme-tokens": "^0.4.0",
"emotion-theming": "^10.0.10"
},
"peerDependencies": {
"@twilio-paste/theme-tokens": "^0.4.0",
"@emotion/core": "^10.0.14",
"@emotion/styled": "^10.0.14",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-system": "^4.1.0"
},
"devDependencies": {
"@twilio-paste/theme-tokens": "^0.4.0",
"rollup": "^1.16.2",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.0.1",
@@ -41,4 +42,4 @@
"rollup-plugin-typescript2": "^0.21.2",
"typescript": "^3.5.2"
}
}
}
@@ -46,8 +46,7 @@ module.exports = {
resolve: `gatsby-plugin-mdx`,
options: {
defaultLayouts: {
default: require.resolve('./src/templates/index.tsx'),
components: require.resolve('./src/templates/components.tsx'),
default: require.resolve('./src/layouts/DefaultLayout.tsx'),
},
},
},
@@ -22,6 +22,7 @@
"@mdx-js/tag": "^0.20.3",
"@twilio-paste/box": "^0.2.4",
"@twilio-paste/heading": "^0.3.0",
"@twilio-paste/screen-reader-only": "0.0.1",
"@twilio-paste/text": "^0.3.1",
"@twilio-paste/theme": "^0.3.0",
"@twilio-paste/theme-tokens": "^0.4.0",
@@ -0,0 +1,35 @@
import * as React from 'react';
import styled from '@emotion/styled';
import {themeGet} from 'styled-system';
import {Link} from 'gatsby';

const CrumbSlashStyled = styled.aside(props => ({
padding: `0 ${themeGet('space.space20')(props)}`,
display: 'inline',
color: themeGet('textColors.colorTextWeak')(props),
}));

const CrumbSlash: React.FC<{}> = () => <CrumbSlashStyled>/</CrumbSlashStyled>;

const Breadcrumb: React.FC<{}> = ({children}) => {
return (
<>
{React.Children.map(children, child => (
<>
{child}
<CrumbSlash />
</>
))}
</>
);
};

// TODO use correct tokens for lineHeight after fix
const BreadcrumbItem = styled(Link)`
font-size: ${themeGet('fontSizes.fontSize20')};
line-height: ${themeGet('lineHeights.lineHeight50')};
letter-spacing: normal;
color: ${themeGet('textColors.colorTextLink')};
`;

export {Breadcrumb, BreadcrumbItem};
@@ -1,14 +1,12 @@
import {TextProps} from '@twilio-paste/text';

export type CalloutVariants = 'primary' | 'secondary' | 'warning';

export interface CalloutTitleProps {
as?: string;
}

export interface CalloutTextProps {
as?: string;
marginTop?: string;
marginBottom?: string;
}
export type CalloutTextProps = Pick<TextProps, 'marginTop' | 'marginBottom' | 'as'>;

export interface CalloutProps {
marginTop?: string;
@@ -1,4 +1,8 @@
import * as React from 'react';
import {Link} from 'gatsby';
import {Table, Thead, Tbody, Tr, Th, Td} from '../table';
import {SidebarCategoryRoutes, PackageStatus} from '../../constants';
import {getPackagePath, getNameFromPackageName} from '../../utils/RouteUtils';

interface ComponentOverviewTableProps {
children?: React.ReactElement;
@@ -12,32 +16,45 @@ interface ComponentOverviewTableProps {
}
];
}
export const ComponentOverviewTable: React.FC<ComponentOverviewTableProps> = (
props: ComponentOverviewTableProps
): React.ReactElement => {

function getPackageRoute(name: string, status: string): string | React.ReactNode {
if (status === PackageStatus.BACKLOG) {
return getNameFromPackageName(name);
}

return <Link to={getPackagePath(SidebarCategoryRoutes.COMPONENTS, name)}>{getNameFromPackageName(name)}</Link>;
}

const ComponentOverviewTable: React.FC<ComponentOverviewTableProps> = ({componentsList}) => {
if (componentsList == null) {
return null;
}

// Sort backlog items to the bottom of the list
const sortedComponentsList = componentsList.sort(({node}) => (node.status === PackageStatus.BACKLOG ? 1 : -1));

return (
<table>
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Version</th>
</tr>
</thead>
<tbody>
{props.componentsList != null &&
props.componentsList.map(({node}) => {
return (
<tr key={node.name}>
<td>
<code>{node.name}</code>
</td>
<td>{node.status}</td>
<td>{node.version}</td>
</tr>
);
})}
</tbody>
</table>
<Table>
<Thead>
<Tr>
<Th>Name</Th>
<Th>Status</Th>
<Th>Version</Th>
</Tr>
</Thead>
<Tbody>
{sortedComponentsList.map(({node}) => {
return (
<Tr key={node.name}>
<Td>{getPackageRoute(node.name, node.status)}</Td>
<Td>{node.status}</Td>
<Td>{node.status === PackageStatus.BACKLOG ? '' : node.version}</Td>
</Tr>
);
})}
</Tbody>
</Table>
);
};

export {ComponentOverviewTable};

1 comment on commit 875e124

@now

This comment has been minimized.

Copy link

now bot commented on 875e124 Aug 14, 2019

Please sign in to comment.
You can’t perform that action at this time.