Merge pull request #2544 from contentful/feat/note-and-textlink-new-v…

…ariant feat(note, icon, textLink): add new premium variant
contentful · Jul 19, 2023 · e10b64c · e10b64c · vercel · Jul 19, 2023
2 parents 0847cd6 + fc5575c
commit e10b64c
Show file tree

Hide file tree

Showing 14 changed files with 87 additions and 3 deletions.
diff --git a/.changeset/old-flowers-cheat.md b/.changeset/old-flowers-cheat.md
@@ -0,0 +1,9 @@
+---
+'@contentful/f36-icon': minor
+'@contentful/f36-icons': minor
+'@contentful/f36-note': minor
+'@contentful/f36-text-link': minor
+---
+
+- Add new premium variant to Note, TextLink, Icon
+- Add new Diamond Icon, used as default icon for Note with premium variant
diff --git a/packages/components/icon/src/Icon.tsx b/packages/components/icon/src/Icon.tsx
@@ -29,7 +29,8 @@ export type IconVariant =
   | 'secondary'
   | 'warning'
   | 'muted'
-  | 'white';
+  | 'white'
+  | 'premium';
 
 const sizes: { [key in IconSize]: { [key in 'height' | 'width']: string } } = {
   xlarge: {
@@ -62,6 +63,7 @@ const fills: { [key in IconVariant]: string } = {
   secondary: tokens.gray900,
   warning: tokens.colorWarning,
   white: tokens.colorWhite,
+  premium: tokens.purple500,
 };
 
 export type IconInternalProps = CommonProps & {

diff --git a/packages/components/icons/src/Diamond.tsx b/packages/components/icons/src/Diamond.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { generateIcon } from '@contentful/f36-icon';
+
+export const Diamond = /*#__PURE__*/ generateIcon({
+  name: 'Diamond',
+  viewBox: '0 0 24 24',
+  trimmed: true,
+  path: (
+    <path d="M21.7582 8.82051L17.2415 3.35043C17.151 3.24071 17.0394 3.15271 16.9142 3.09228C16.789 3.03186 16.6531 3.0004 16.5156 3H7.48207C7.34452 3.0004 7.20864 3.03186 7.08346 3.09228C6.9583 3.15271 6.84672 3.24071 6.75617 3.35043L2.23941 8.82051C2.08152 9.01176 1.99625 9.25833 2.00013 9.5124C2.004 9.76647 2.09675 10.01 2.26038 10.1957L11.2939 20.4522C11.3844 20.5549 11.494 20.6368 11.6156 20.6929C11.7373 20.7488 11.8686 20.7778 12.0012 20.7778C12.1339 20.7778 12.2652 20.7488 12.3869 20.6929C12.5085 20.6368 12.618 20.5549 12.7086 20.4522L21.7421 10.1957C21.9051 10.0093 21.997 9.76548 21.9999 9.51141C22.0029 9.25734 21.9168 9.01113 21.7582 8.82051ZM18.899 8.47009H16.3542L13.9346 5.05128H16.076L18.899 8.47009ZM7.47239 10.5214L9.18149 15.0513L5.19223 10.5214H7.47239ZM14.4411 10.5214L11.9988 16.9906L9.55655 10.5214H14.4411ZM10.0631 8.47009L11.9988 5.73504L13.9346 8.47009H10.0631ZM16.5252 10.5214H18.8054L14.8161 15.0513L16.5252 10.5214ZM7.92164 5.05128H10.0631L7.64338 8.47009H5.09867L7.92164 5.05128Z" />
+  ),
+});
diff --git a/packages/components/icons/src/index.ts b/packages/components/icons/src/index.ts
@@ -55,6 +55,7 @@ export { Download as DownloadIcon } from './Download';
 export { DownloadTrimmed as DownloadTrimmedIcon } from './DownloadTrimmed';
 export { Drag as DragIcon } from './Drag';
 export { DragTrimmed as DragTrimmedIcon } from './DragTrimmed';
+export { Diamond as DiamondIcon } from './Diamond';
 export { Edit as EditIcon } from './Edit';
 export { EditTrimmed as EditTrimmedIcon } from './EditTrimmed';
 export { EmbeddedEntryBlock as EmbeddedEntryBlockIcon } from './EmbeddedEntryBlock';

diff --git a/packages/components/note/examples/NoteVariationsExample.tsx b/packages/components/note/examples/NoteVariationsExample.tsx
@@ -9,6 +9,7 @@ export default function NoteVariationsExample() {
       <Note variant="positive">Positive</Note>
       <Note variant="warning">Warning</Note>
       <Note variant="negative">Negative</Note>
+      <Note variant="premium">Premium</Note>
     </Stack>
   );
 }
diff --git a/packages/components/note/examples/WithTitleExample.tsx b/packages/components/note/examples/WithTitleExample.tsx
@@ -17,6 +17,9 @@ export default function NoteWithTitleExample() {
       <Note title="Negative title" variant="negative">
         Negative
       </Note>
+      <Note title="Premium title" variant="premium">
+        Premium
+      </Note>
     </Stack>
   );
 }
diff --git a/packages/components/note/src/Note.styles.tsx b/packages/components/note/src/Note.styles.tsx
@@ -47,6 +47,15 @@ const variantToStyles = (variant: NoteVariant): CSSObject => {
         backgroundColor: tokens.gray100,
         borderColor: tokens.gray300,
 
+        a: {
+          color: tokens.blue700,
+        },
+      };
+    case 'premium':
+      return {
+        backgroundColor: tokens.purple100,
+        borderColor: tokens.purple300,
+
         a: {
           color: tokens.blue700,
         },

diff --git a/packages/components/note/src/Note.tsx b/packages/components/note/src/Note.tsx
@@ -15,6 +15,7 @@ import {
   ErrorCircleIcon,
   InfoCircleIcon,
   WarningIcon,
+  DiamondIcon,
 } from '@contentful/f36-icons';
 import { Icon } from '@contentful/f36-icon';
 
@@ -26,14 +27,16 @@ const icons = {
   negative: ErrorCircleIcon,
   warning: WarningIcon,
   neutral: InfoCircleIcon,
+  premium: DiamondIcon,
 };
 
 export type NoteVariant =
   | 'negative'
   | 'positive'
   | 'primary'
   | 'warning'
-  | 'neutral';
+  | 'neutral'
+  | 'premium';
 
 export type NoteInternalProps = CommonProps & {
   /**

diff --git a/packages/components/note/stories/Note.stories.tsx b/packages/components/note/stories/Note.stories.tsx
@@ -208,5 +208,31 @@ export const overview = () => (
         </Paragraph>
       </Note>
     </Flex>
+
+    <SectionHeading as="h3" marginBottom="spacingS">
+      Note premium
+    </SectionHeading>
+
+    <Flex marginBottom="spacingM">
+      <Note variant="premium">
+        A piece of information that is relevant to the context the user is
+        currently in.
+      </Note>
+    </Flex>
+    <Flex marginBottom="spacingM">
+      <Note variant="premium" icon={<Icon as={icons.StarIcon} />}>
+        A piece of information that is relevant to the context the user is
+        currently in.
+      </Note>
+    </Flex>
+    <Flex marginBottom="spacingM">
+      <Note variant="premium" title="Short, yet succinct title" withCloseButton>
+        <Paragraph>
+          A piece of information that is relevant to the context the user is
+          currently in. If you like it then you should put{' '}
+          <TextLink> a link</TextLink> in it.
+        </Paragraph>
+      </Note>
+    </Flex>
   </Flex>
 );
diff --git a/packages/components/text-link/README.mdx b/packages/components/text-link/README.mdx
@@ -42,6 +42,7 @@ There are a number of variations of `TextLink` styles, here is a guide for when
 - **Secondary** - For actions that should be emphasized less than the default primary style.
 - **Muted** - For actions that should be emphasized less than the secondary style.
 - **White** - For actions appearing on a dark background.
+- **Premium** - For actions that correspond to a paid feature.
 
 ```jsx file=examples/TextLinkAsButtonExample.tsx
 

diff --git a/packages/components/text-link/examples/TextLinkAsButtonExample.tsx b/packages/components/text-link/examples/TextLinkAsButtonExample.tsx
@@ -63,6 +63,15 @@ export default function TextLinkAsButtonExample() {
           Clear
         </TextLink>
       </div>
+      <TextLink
+        as="button"
+        variant="premium"
+        onClick={() => {
+          alert('accessing premium feature');
+        }}
+      >
+        Upgrade
+      </TextLink>
     </Stack>
   );
 }
diff --git a/packages/components/text-link/src/TextLink.styles.ts b/packages/components/text-link/src/TextLink.styles.ts
@@ -47,6 +47,13 @@ const variantToStyles = (variant: TextLinkVariant) => {
           color: tokens.gray100,
         },
       };
+    case 'premium':
+      return {
+        color: tokens.purple600,
+        '&:hover, &:focus': {
+          color: tokens.purple700,
+        },
+      };
     default:
       return { color: tokens.colorWhite };
   }

diff --git a/packages/components/text-link/src/types.ts b/packages/components/text-link/src/types.ts
@@ -4,4 +4,5 @@ export type TextLinkVariant =
   | 'primary'
   | 'secondary'
   | 'muted'
-  | 'white';
+  | 'white'
+  | 'premium';
diff --git a/packages/components/text-link/stories/TextLink.stories.tsx b/packages/components/text-link/stories/TextLink.stories.tsx
@@ -88,6 +88,7 @@ const textLinkVariants = [
   'secondary',
   'muted',
   'white',
+  'premium',
 ];
 
 export const overview = () => (