Merge branch 'main' into fix/danger-changeset-design-tokens

twilio-labs · Feb 28, 2023 · 0bf0001 · 0bf0001
2 parents e3d2db7 + b27a244
commit 0bf0001
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 16 deletions.
diff --git a/.changeset/wicked-dancers-exercise.md b/.changeset/wicked-dancers-exercise.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/inline-code': minor
+'@twilio-paste/core': minor
+---
+
+[Inline Code] Add variant prop, with "default" and "minimal" styles. Update styles to align with new Paste Twilio theme.
diff --git a/.changeset/witty-papayas-move.md b/.changeset/witty-papayas-move.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/display-heading': patch
+'@twilio-paste/core': patch
+---
+
+[Display Heading] Update styles to align with new Paste Twilio theme
diff --git a/packages/paste-core/components/display-heading/src/index.tsx b/packages/paste-core/components/display-heading/src/index.tsx
@@ -57,6 +57,7 @@ const DisplayHeading = React.forwardRef<HTMLHeadingElement, DisplayHeadingProps>
         element={element}
         id={id}
         color="colorText"
+        fontFamily="fontFamilyDisplay"
         variant={variant}
         ref={ref}
       >

diff --git a/packages/paste-core/components/inline-code/src/index.tsx b/packages/paste-core/components/inline-code/src/index.tsx
@@ -1,30 +1,45 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
-import type {BoxProps} from '@twilio-paste/box';
+import type {BoxProps, BoxStyleProps} from '@twilio-paste/box';
+
+type InlineCodeVariants = 'default' | 'minimal';
 
 export interface InlineCodeProps extends Partial<Omit<HTMLDivElement, 'children'>> {
   children: string;
   element?: BoxProps['element'];
+  variant?: InlineCodeVariants;
 }
 
+const variantStyles: Record<InlineCodeVariants, BoxStyleProps> = {
+  default: {
+    color: 'colorTextPrimaryStronger',
+    backgroundColor: 'colorBackgroundPrimaryWeakest',
+    borderColor: 'colorBorderPrimaryWeaker',
+  },
+  minimal: {
+    color: 'colorTextWeak',
+    backgroundColor: 'colorBackgroundWeak',
+    borderColor: 'colorBorderWeak',
+  },
+};
+
 const InlineCode = React.forwardRef<HTMLDivElement, InlineCodeProps>(
-  ({children, element = 'INLINE_CODE', ...props}, ref) => {
+  ({children, element = 'INLINE_CODE', variant = 'default', ...props}, ref) => {
     return (
       <Box
         as="code"
         element={element}
+        variant={variant}
         {...safelySpreadBoxProps(props)}
-        backgroundColor="colorBackground"
         borderWidth="borderWidth10"
-        borderColor="colorBorderWeaker"
         borderStyle="solid"
         borderRadius="borderRadius20"
-        color="inherit"
         fontFamily="fontFamilyCode"
         fontSize="inherit"
         lineHeight="inherit"
         paddingX="space20"
+        {...variantStyles[variant]}
         ref={ref}
       >
         {children}
@@ -38,6 +53,7 @@ InlineCode.displayName = 'InlineCode';
 InlineCode.propTypes = {
   children: PropTypes.string.isRequired,
   element: PropTypes.string,
+  variant: PropTypes.oneOf(['default', 'minimal']),
 };
 
 export {InlineCode};
diff --git a/packages/paste-core/components/inline-code/stories/index.stories.tsx b/packages/paste-core/components/inline-code/stories/index.stories.tsx
@@ -5,6 +5,7 @@ import {Box} from '@twilio-paste/box';
 import {Stack} from '@twilio-paste/stack';
 import {useTheme} from '@twilio-paste/theme';
 import {CustomizationProvider} from '@twilio-paste/customization';
+import {Heading} from '@twilio-paste/heading';
 
 import {InlineCode} from '../src';
 
@@ -18,14 +19,30 @@ export const Default: StoryFn = () => {
   return <InlineCode>0000001111111122234444444</InlineCode>;
 };
 
+export const Minimal: StoryFn = () => {
+  return <InlineCode variant="minimal">0000001111111122234444444</InlineCode>;
+};
+
 export const ReallyLongContent: StoryFn = () => {
   return (
-    <Box maxWidth="size40">
-      <InlineCode>
-        000 00 0111111 1122 2344444 44 000 00 0111111 1122 2344444 44 000 00 0111111 1122 2344444 44 000 00 0111111 1122
-        2344444 44
-      </InlineCode>
-    </Box>
+    <>
+      <Box maxWidth="size40">
+        <InlineCode>
+          000 00 0111111 1122 2344444 44 000 00 0111111 1122 2344444 44 000 00 0111111 1122 2344444 44 000 00 0111111
+          1122 2344444 44
+        </InlineCode>
+      </Box>
+      <Box maxWidth="size40">
+        <Heading variant="heading10" as="h2">
+          This is my heading
+          <InlineCode>
+            000 00 0111111 1122 2344444 44 000 00 0111111 1122 2344444 44 000 00 0111111 1122 2344444 44 000 00 0111111
+            1122 2344444 44
+          </InlineCode>
+          it is really really long
+        </Heading>
+      </Box>
+    </>
   );
 };
 

diff --git a/packages/paste-website/src/pages/components/inline-code/index.mdx b/packages/paste-website/src/pages/components/inline-code/index.mdx
@@ -69,7 +69,7 @@ The most common use for Inline Code is inside of other pieces of text. Inline Co
 <LivePreview scope={{InlineCode, Text}} language="jsx">
   {`<Text as="span">
       A  <InlineCode>Service</InlineCode> is the top-level scope of all other resources in the REST API. It owns
-      <InlineCode>Sessions</InlineCode> and <InlineCode>Participants</InlineCode> for a Proxy application.
+      {' '}<InlineCode>Sessions</InlineCode> and <InlineCode>Participants</InlineCode> for a Proxy application.
     </Text>`}
 </LivePreview>
 
@@ -86,6 +86,14 @@ Inline Code is also commonly used standalone for key pieces of code text, such a
 `}
 </LivePreview>
 
+### Minimal variant
+
+Set `variant="minimal"` to use a more subtle snippet of code.
+
+<LivePreview scope={{InlineCode, Text}} language="jsx">
+  {`<InlineCode variant='minimal'>WQC0000001111111122234444444</InlineCode>`}
+</LivePreview>
+
 ## Usage Guide
 
 ### API
@@ -106,10 +114,11 @@ const ExampleInlineCode = () => <InlineCode>console.log(mySustainabilityGoals)</
 
 #### Props
 
-| Prop     | Type     | Description                                                                               | Default       |
-| -------- | -------- | ----------------------------------------------------------------------------------------- | ------------- |
-| children | `string` | text to display inline as code                                                            |               |
-| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'INLINE_CODE' |
+| Prop     | Type                   | Description                                                                               | Default       |
+| -------- | ---------------------- | ----------------------------------------------------------------------------------------- | ------------- |
+| children | `string`               | text to display inline as code                                                            |               |
+| element? | `string`               | Overrides the default element name to apply unique styles with the Customization Provider | 'INLINE_CODE' |
+| variant? | `'default', 'minimal'` | Sets the variant to display                                                               | 'default'     |
 
 ### Figma