feat(textlink): add white linktype

contentful · Mar 18, 2020 · ed8e327 · ed8e327
1 parent 7c91f8a
commit ed8e327
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 1 deletion.
diff --git a/packages/forma-36-react-components/src/components/TextLink/TextLink.css b/packages/forma-36-react-components/src/components/TextLink/TextLink.css
@@ -61,6 +61,17 @@
   color: var(--color-text-light);
 }
 
+.TextLink--white,
+.TextLink--white:link {
+  color: var(--color-white);
+
+  &:hover,
+  &:focus {
+    color: var(--color-white);
+    opacity: 0.75;
+  }
+}
+
 .TextLink--disabled,
 .TextLink--disabled:link {
   opacity: 0.5;
@@ -108,6 +119,14 @@
 
     color: var(--color-text-light);
   }
+
+  &.TextLink--white:hover {
+    & .TextLink__icon {
+      fill: var(--color-white);
+    }
+
+    color: var(--color-white);
+  }
 }
 
 .TextLink__icon {

diff --git a/packages/forma-36-react-components/src/components/TextLink/TextLink.md b/packages/forma-36-react-components/src/components/TextLink/TextLink.md
@@ -13,6 +13,7 @@ There are a number of variations of TextLink styles, here is a guide for when to
 - **Negative** - Used for destructive actions - when something can't be undone. For example, deleting entities.
 - **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.
 
 ## Best practices
 

diff --git a/packages/forma-36-react-components/src/components/TextLink/TextLink.stories.tsx b/packages/forma-36-react-components/src/components/TextLink/TextLink.stories.tsx
@@ -25,6 +25,7 @@ storiesOf('Components|TextLink', module)
             Negative: 'negative',
             Secondary: 'secondary',
             Muted: 'muted',
+            White: 'white',
           },
           'primary',
         )}

diff --git a/packages/forma-36-react-components/src/components/TextLink/TextLink.test.tsx b/packages/forma-36-react-components/src/components/TextLink/TextLink.test.tsx
@@ -46,6 +46,12 @@ it('renders as a "muted" link type', () => {
   expect(output).toMatchSnapshot();
 });
 
+it('renders as a "white" link type', () => {
+  const output = shallow(<TextLink linkType="white">Text Link</TextLink>);
+
+  expect(output).toMatchSnapshot();
+});
+
 it('calls an onClick function', () => {
   const onClickFunc = jest.fn();
   const output = shallow(<TextLink onClick={onClickFunc}>Text Link</TextLink>);

diff --git a/packages/forma-36-react-components/src/components/TextLink/TextLink.tsx b/packages/forma-36-react-components/src/components/TextLink/TextLink.tsx
@@ -10,7 +10,8 @@ export type TextLinkType =
   | 'positive'
   | 'negative'
   | 'secondary'
-  | 'muted';
+  | 'muted'
+  | 'white';
 
 type IconPositionType = 'right' | 'left';
 

diff --git a/...es/forma-36-react-components/src/components/TextLink/__snapshots__/TextLink.test.tsx.snap b/...es/forma-36-react-components/src/components/TextLink/__snapshots__/TextLink.test.tsx.snap
@@ -144,6 +144,19 @@ exports[`renders as a "secondary" link type 1`] = `
 </button>
 `;
 
+exports[`renders as a "white" link type 1`] = `
+<button
+  className="TextLink TextLink--white"
+  data-test-id="cf-ui-text-link"
+  disabled={false}
+  type="button"
+>
+  <TabFocusTrap>
+    Text Link
+  </TabFocusTrap>
+</button>
+`;
+
 exports[`renders as a button 1`] = `
 <button
   className="TextLink TextLink--primary"