Skip to content
Permalink
Browse files

feat(website): added callout with help for component and utility lists (

#168)

* feat(website): added callout with help for component and utility lists

* docs(website): swapped CalloutText for UL LI components

* feat(website): fix typo in import

Co-Authored-By: Rich Bachman <rb@richbachman.com>

* feat(website): fix import typo in components

Co-Authored-By: Rich Bachman <rb@richbachman.com>
  • Loading branch information
2 people authored and SiTaggart committed Nov 9, 2019
1 parent df797e5 commit b4be1d74d369a7312f28e9fd565abab0710676c8
Showing with 285 additions and 230 deletions.
  1. +23 −3 packages/paste-website/src/pages/components/index.mdx
  2. +28 −3 packages/paste-website/src/pages/utilities/index.mdx
  3. +234 −224 yarn.lock
@@ -9,6 +9,8 @@ import {Heading} from '@twilio-paste/heading';
import {ComponentOverviewTable} from '../../components/component-overview-table';
import {Breadcrumb, BreadcrumbItem} from '../../components/breadcrumb';
import {SidebarCategoryRoutes} from '../../constants';
import {Callout, CalloutTitle, CalloutText} from '../../components/callout';
import {UL, LI} from '../../components/Typography';

<Breadcrumb>
<BreadcrumbItem to="/">Home</BreadcrumbItem>
@@ -21,9 +23,27 @@ The components listed here are on our roadmap. Only a few of them are available

If you’re planning on using an alpha or beta component, please check in with the Paste team through the <strong>#help-design-system</strong> channel on Slack.

Don't see a component you need listed here? [Create an issue on GitHub](https://github.com/twilio-labs/paste/issues), and we'll evaluate it. Not all component
requests are accepted for the design system. We’ll have guidelines soon for what to do if your component isn’t
supported.
<Callout>
<CalloutTitle as="h4">Don't see a utility or component you need listed here?</CalloutTitle>
<UL>
<LI>
First off, we recommend{' '}
<Anchor href="https://github.com/twilio-labs/paste/issues">creating an issue on GitHub</Anchor> with your
component / utility proposal.
</LI>
<LI>
While not all requests are accepted for the design system, we may be able to suggest suitable alternatives - for
this, drop us a note on #help-design-system or join our Weekly Office hours.
</LI>
<LI>
We've also writtten a guide for{' '}
<Anchor href="/tokens/how-to-compose-custom-ui-with-tokens">
how you can build custom components with Tokens
</Anchor>{' '}
and still benefit from Paste design updates
</LI>
</UL>
</Callout>

<ComponentOverviewTable
categoryRoute={SidebarCategoryRoutes.COMPONENTS}
@@ -6,12 +6,37 @@ description: Our utilities are rad
import {graphql} from 'gatsby';
import {ComponentOverviewTable} from '../../components/component-overview-table';
import {SidebarCategoryRoutes} from '../../constants';
import {Callout, CalloutTitle, CalloutText} from '../../components/callout';
import {Anchor} from '@twilio-paste/anchor';
import {UL, LI} from '../../components/Typography';

# Utilities Overview

<ComponentOverviewTable
categoryRoute={SidebarCategoryRoutes.UTILITIES}
componentsList={props.data.allPasteUtility.edges}
<Callout>
<CalloutTitle as="h4">Don't see a utility or component you need listed here?</CalloutTitle>
<UL>
<LI>
First off, we recommend{' '}
<Anchor href="https://github.com/twilio-labs/paste/issues">creating an issue on GitHub</Anchor> with your
component / utility proposal.
</LI>
<LI>
While not all requests are accepted for the design system, we may be able to suggest suitable alternatives - for
this, drop us a note on #help-design-system or join our Weekly Office hours.
</LI>
<LI>
We've also writtten a guide for{' '}
<Anchor href="/tokens/how-to-compose-custom-ui-with-tokens">
how you can build custom components with Tokens
</Anchor>{' '}
and still benefit from Paste design updates
</LI>
</UL>
</Callout>

<ComponentOverviewTable
categoryRoute={SidebarCategoryRoutes.UTILITIES}
componentsList={props.data.allPasteUtility.edges}
/>

export const pageQuery = graphql`

1 comment on commit b4be1d7

@now

This comment has been minimized.

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