feat(card): updated card docs introduced silent mode #230

GiantRobots · 2019-12-13T00:04:58Z

Contributing to Twilio

All third-party contributors acknowledge that any contributions they provide will be made under the same open-source license that the open-source project is provided under.

I acknowledge that all my contributions will be made under the project's license.

vercel · 2019-12-13T00:05:05Z

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/twilio-dsys/paste/n98cf2em5
🌍 Preview: https://paste-git-fork-giantrobots-carddocs.twilio-dsys.now.sh

packages/paste-website/src/pages/components/card/index.mdx

seanmateer · 2019-12-16T21:01:27Z

packages/paste-website/src/pages/components/card/index.mdx

-  <Text as="p">Body</Text>
-</Card>`}
+  <div style={{textAlign: 'center'}}>
+    <PlusIcon decorative title="There just wasn't a details icon to use"/>


Can you add a size='sizeIcon40'

SiTaggart · 2019-12-16T21:01:40Z

packages/paste-website/src/pages/components/card/index.mdx

 * A flexible width and height.
    * Height is determined by a Card’s child components
    * Width is determined by the parent component or container surrounding Card

 ### Card vs. Box

-A card is a box with default attributes defined above. The purpose of the card is to provide a consistent experience to use across the website the design team can
+At its core, Card is a Box with styled with the specific default attributes above and more explicit use cases 


I think this first sentence could do with some work

At its core, Card is a <Box> with specific styling attributes and more explicit use cases and that you can find in Examples.

serifluous · 2019-12-16T21:57:53Z

packages/paste-website/src/pages/components/card/index.mdx

 * A background color of $color-background-body.
 * A border width of $border-width-20.
 * A border radius of $border-radius-20.
-* A border color of $color-border.
+* A border color of $color-border-light.


This breakdown can be removed since they're laid out in the Anatomy section.

With that being said, can we link "non-negotiable properties" above to the Anatomy section?

Yep, and when the items are removed, this section could be reworded as a paragraph without the bullet points.

serifluous · 2019-12-17T00:09:22Z

packages/paste-website/src/pages/components/card/index.mdx

+flexible container that does not require specific components inside of it, allowing an implementer to 
+compose as needed, but elements such as Heading, Text, and Button or Anchor are commonly used.


Break up the sentence to: "...does not require specific components inside of it. You can compose the card as you need it, but elements such as Heading, Text, Button, and Anchor are commonly used."

Link to each of those components.

serifluous · 2019-12-17T00:10:06Z

packages/paste-website/src/pages/components/card/index.mdx

+Cards are specifically-styled containers that group relatable content and actions. Card is an extremely 
+flexible container that does not require specific components inside of it, allowing an implementer to 
+compose as needed, but elements such as Heading, Text, and Button or Anchor are commonly used.
+See [When to use a Card](#when-to-use-a-card) and [Examples](#examples) for common Card patterns and dos/dont’s. A Card does not 


"dont's" --> "don'ts"

how embarrassing 🙈

serifluous · 2019-12-17T00:28:44Z

packages/paste-core/components/card/src/index.tsx

@@ -49,4 +26,4 @@ const Card: React.FunctionComponent<CardProps> = ({children, ...attributes}) =>
  );


(can't figure out how to comment on the actual line 17 so dropping it here)

borderColor should be colorBorderLight instead of colorBorder

This one is resolved now - good catch!

serifluous · 2019-12-17T00:29:45Z

packages/paste-website/src/pages/components/card/index.mdx

-  </CardFooter>
+#### Card with Title, Body and Button
+
+One of the most common use cases for a Card is to relate a Title (Heading) , supporting body copy (Text), 


Should this say "(Paragraph)" instead of "(Text)"? @seanmateer

serifluous · 2019-12-17T00:30:10Z

packages/paste-website/src/pages/components/card/index.mdx

-<LivePreview scope={{Card, Text, Heading}} language="jsx">
+#### Card with Centered Content
+
+Your implementation use case my call for a Card with centered content. You can accommodate this by 


"my" --> "may"

serifluous · 2019-12-17T00:36:03Z

packages/paste-website/src/pages/components/card/index.mdx

+    <Img fluid={props.data.headingInCardDo.childImageSharp.fluid} />
+  </Do>
+  <Dont title="Don't" body={<>Don’t use Cards to highlight multiple primary actions on a single page. <br /><br />
+    Don’t use multiple Heading components in one Card</>} preview={false} >


Seems like the second line is here by mistake since it's repeated (ish) in the next "Don't"

serifluous · 2019-12-17T00:36:15Z

packages/paste-website/src/pages/components/card/index.mdx

+  />
+  <Dont
+    title="Don't"
+    body="Don’t place multiple Header components in a single Card."


"Header" --> "Heading"

serifluous · 2019-12-18T20:22:29Z

packages/paste-website/src/pages/components/card/index.mdx

+See [When to use a Card](#when-to-use-a-card) and [Examples](#examples) for common Card patterns and dos/donts. A Card does not 
+currently handle any interactive events such as hover, click, or focus, though children 
+composed inside of it may commonly have event handlers.


The last sentence could be broken out into its own paragraph. And take out the word "currently" since we don't have plans yet to add event handlers.

serifluous · 2019-12-18T20:26:53Z

packages/paste-website/src/pages/components/card/index.mdx


 ### Card vs. Box

-A card is a box with default attributes defined above. The purpose of the card is to provide a consistent experience to use across the website the design team can
+At its core, Card is a [Box](/utilities/box) with specific styling attributes and more explicit use cases and that you can find in [Examples](#examples). 


"and that" --> "that"

serifluous · 2019-12-18T20:35:54Z

packages/paste-website/src/pages/components/card/index.mdx

+
+| Property         | Default token         | Modifiable? |
+| ---------------- | --------------------- | ----------- |
+| background-color | background-color-body | No          |


"background-color-body" --> "color-background-body"

* fix: betaBadge to show modal on useEffect, fixes hydration problem * fix: storybook quiet mode script introduced here #230 * fix: prevent select showing options server-side which leads to hydration issues * fix: using styled on Nextjs Link component (hydration issue) * revert: adam fix reakit Portal #2926

* build: add React18 Support (#2682) * build: add React18 Support Update packages dependencies to include React v18 * refactor: add PropsWithChildren pros Add React.PropsWithChildren for compatibility with React v18 * chore: update React version on missing packages * fix: added newer proptypes types (react 18) (#3) * refactor(yarn.lock): update yarn.lock file * chore: update eslint and React versions * chore: fixing eslint issues * WIP: Fix react fc typings (#5) * fix: un-needed React.FC typing with no children * fix: removing unknown from interface PropsWithChildren as not needed * fix: types on the rest of the files * fix(components): radio and button-group React18 fix * fix: update React app tests Co-authored-by: Pablo Espinosa <espipj@gmail.com> * chore: upgrade react-helmet types * [AIONAPFMWK-174]: refactor react-uid & React 18 useId (#2903) * chore: added useUIDSeed custom using React useId method (cherry picked from commit d39cdc9) * fix: update yarn.lock file * fix: react type version and include prop-type types (#2913) * chore: upgraded @react-spring (#2914) * fix: fix functionality of useUIDSeed and update tests (#2917) * [AIONAPFMWK-170] Types Fix (#2915) * chore: WIP updates on react 18 (#2868) * chore: upgrade emotion libs * chore: upgrade react-spring for animation lib This reverts commit 62d59e8. * chore: remove obsolete react imports * chore: remove more react imports * chore: fix types in TableOfContentsList (Scrollspy) * chore: disable eslint rule for react imports * chore: fix lint error * chore: auto-fix lint warnings * chore: removing un-used imports Co-authored-by: Eirini Pappa <eptinea@gmail.com> Co-authored-by: Eirini Pappa <epappa@twilio.com> * fix: added back missing import (#2921) * chore: update Storybook to v7 and use Vite (#2895) (#2922) * chore: update to Storybook v7 * chore: remove old babel plugins * chore: update to use vite * fix: address build issue * refactor: use TypeScript for SB files * fix: gets builds to work * fix: disable Chromatic on gatsby stories * fix: mock gatsby exports * refactor: output generic tokens as esm * chore: add changeset * ci: bump memory * fix: remove barrel imports of prop-types * fix: chat-log story structure * chore: update changeset * chore: update storybook * docs: add comments * fix: get env vars properly in vite * fix: set profiling alias properly * chore: update changeset * chore: use separate changeset for tokens * chore: include mainFields * fix: only set mainFields for dev * chore: remove flag * fix: adjust test-storybook * fix: wait for SB to load * chore: delete empty package.json * fix: don't use mainFields for test-runner Co-authored-by: Robert Niznik <rniznik@twilio.com> * fix: react 18 - fix reakit ssr issues with portals (#2926) * fix: reakit ssr issues with portals * chore: more detailed comments at top of reakti Portal file * chore: remove unecessary exports from reakit library * feat/react 18 fix tests for 16 and 17 (#2929) * fix: broken tests with jest * fix: update all '@testing-library/react-hooks' imports * build: create new test directory with util methods to help with jest tests * chore: linting update on test files * chore: empty commit to test pipelines * chore: re-introduce button tests * chore: minor update to test pipelines * fix: remove cache from pipelines * fix: async issues with tooltip tests * fix: additional async tests added for updated userEvent methods * chore: trigger pipelines with empty commit * fix: resolve remaining tests for react 18 * fix: re-introduce react import on paste-website files * fix: increase timeout on failing test * chore: split composable cell test into smaller tests * fix: address issues with user event and fix root.render errors * fix: react-dom tests * chore: fix test using reactUID * chore: add react 17 tests to github workflow * chore: update comments and create react-dom monkey patch * fix: fix broken tests from react dom patch * chore: update react-dom helper method for tests * chore: remove async from synchronous test * chore: linting updates on tests * feat: add react 18 as dependency on new components (#2941) * fix: add react 18 as dependency on new packages * fix: add disclaimer at top of yarn lock * chore: upgrade react and react-router-dom in cra template (#2944) * chore: ignore tsx check on react imports marked as unused (#2945) * fix: AIONAPFMWK-171: fix Hydration issues SSR on Paste Remix (#2933) * fix: betaBadge to show modal on useEffect, fixes hydration problem * fix: storybook quiet mode script introduced here #230 * fix: prevent select showing options server-side which leads to hydration issues * fix: using styled on Nextjs Link component (hydration issue) * revert: adam fix reakit Portal #2926 * fix: use @niznikr/reakit for portal fix * chore: update prettier format * fix: get gatsby to build * fix: update lockfile * fix: delete old changesets * fix: address dep issue * fix: update snapshot * fix: update comment style * fix: ignore lint issues for patches * chore: updates from rebase * chore: upgrade to next 13 to fix hydration errors * chore: fix date rendering * chore: add changeset * chore: add sharp * chore: fix dep pins * chore: remove resolution * chore: pin versions * chore: undo mock changes * chore: update lock * chore: update changeset * chore: update forked reakit * ci: wait for docsearch render * fix: correct copy button double render * ci: bump wait for double render * chore: update reakit to include popover render fix * chore: add changeset * chore: switch to twilio namespaced reakit fork * chore: new website image fix to be updated to next 13 * chore: update upgrade-guide.mdx * fix: missing props with children type conversion --------- Co-authored-by: Andrea Z <andreasonny83@gmail.com> Co-authored-by: Pablo Espinosa <espipj@gmail.com> Co-authored-by: Andrea Z <azornada@twilio.com> Co-authored-by: adamb-92 <113509945+adamb-92@users.noreply.github.com> Co-authored-by: Eirini Pappa <eptinea@gmail.com> Co-authored-by: Eirini Pappa <epappa@twilio.com> Co-authored-by: Si Taggart <me@simontaggart.com> Co-authored-by: TheSisb <shadiisber@gmail.com>

feat(card): updated card docs introduced silent mode

84b5530

vercel bot deployed to staging December 13, 2019 00:05 View deployment

TheSisb reviewed Dec 13, 2019

View reviewed changes

packages/paste-website/src/pages/components/card/index.mdx Outdated Show resolved Hide resolved

feat(card): updated docs

2f2a536

vercel bot temporarily deployed to staging December 13, 2019 21:05 Inactive

Merge branch 'master' into CardDocs

9b145d2

vercel bot deployed to staging December 13, 2019 21:07 View deployment

TheSisb approved these changes Dec 13, 2019

View reviewed changes

feat(card): removing cardfooter from tests because we removed cardfooter

e2b6b47

vercel bot deployed to staging December 16, 2019 17:42 View deployment

Merge branch 'master' into CardDocs

638c9b6

vercel bot deployed to staging December 16, 2019 18:23 View deployment

seanmateer reviewed Dec 16, 2019

View reviewed changes

SiTaggart reviewed Dec 16, 2019

View reviewed changes

serifluous reviewed Dec 16, 2019

View reviewed changes

serifluous reviewed Dec 17, 2019

View reviewed changes

fix: pr comment typos, adding links to components

d468d79

vercel bot deployed to staging December 18, 2019 18:41 View deployment

fix: pr typos/copy tweaks part 2

2f2de07

vercel bot deployed to staging December 18, 2019 19:19 View deployment

fix: forgot a typo

e04838c

vercel bot deployed to staging December 18, 2019 19:28 View deployment

serifluous reviewed Dec 18, 2019

View reviewed changes

fix: pr comments

736e31b

vercel bot deployed to staging December 18, 2019 22:43 View deployment

serifluous approved these changes Dec 20, 2019

View reviewed changes

Merge branch 'master' into CardDocs

b8c657d

vercel bot temporarily deployed to staging December 20, 2019 00:15 Inactive

chore(card): set the card to beta ready for publish

0362e77

vercel bot deployed to staging December 20, 2019 00:20 View deployment

SiTaggart merged commit e0e2ca7 into twilio-labs:master Dec 20, 2019

espipj added a commit to espipj/paste that referenced this pull request Jan 11, 2023

fix: storybook quiet mode script introduced here twilio-labs#230

b7e43ba

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(card): updated card docs introduced silent mode #230

feat(card): updated card docs introduced silent mode #230

GiantRobots commented Dec 13, 2019 •

edited by TheSisb

Loading

vercel bot commented Dec 13, 2019 •

edited

Loading

seanmateer Dec 16, 2019

SiTaggart Dec 16, 2019

seanmateer Dec 16, 2019

serifluous Dec 16, 2019

seanmateer Dec 16, 2019

serifluous Dec 17, 2019

serifluous Dec 17, 2019

serifluous Dec 17, 2019

seanmateer Dec 18, 2019

serifluous Dec 17, 2019 •

edited

Loading

seanmateer Dec 18, 2019

serifluous Dec 17, 2019

SiTaggart Dec 17, 2019

serifluous Dec 17, 2019

serifluous Dec 17, 2019

serifluous Dec 17, 2019

serifluous Dec 18, 2019

serifluous Dec 18, 2019

serifluous Dec 18, 2019

		flexible container that does not require specific components inside of it, allowing an implementer to
		compose as needed, but elements such as Heading, Text, and Button or Anchor are commonly used.

		@@ -49,4 +26,4 @@ const Card: React.FunctionComponent<CardProps> = ({children, ...attributes}) =>
		);

feat(card): updated card docs introduced silent mode #230

feat(card): updated card docs introduced silent mode #230

Conversation

GiantRobots commented Dec 13, 2019 • edited by TheSisb Loading

vercel bot commented Dec 13, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

serifluous Dec 17, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

GiantRobots commented Dec 13, 2019 •

edited by TheSisb

Loading

vercel bot commented Dec 13, 2019 •

edited

Loading

serifluous Dec 17, 2019 •

edited

Loading