Skip to content

Commit

Permalink
fix(table-of-contents): support dark theme
Browse files Browse the repository at this point in the history 
Refs #4214.
  • Loading branch information
@asudoh
asudoh committed Oct 13, 2020
1 parent cae2273 commit d5ad20a
Show file tree
Hide file tree
Showing 6 changed files with 58 additions and 223 deletions.
213 changes: 18 additions & 195 deletions packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96636,6 +96636,7 @@ exports[`Storyshots Components|Table of Contents Dynamic Items 1`] = `
data-floating-menu-container=""
role="main"
>
<style />
<ManuallyDefineMenuItems
parameters={
Object {
Expand Down Expand Up @@ -96813,20 +96814,8 @@ exports[`Storyshots Components|Table of Contents Dynamic Items 1`] = `
<a
data-title="Cras molestie condimentum"
name="8"
style={
Object {
"color": "#000",
}
}
>
<h3
style={
Object {
"paddingBottom": "1rem",
"paddingTop": "2rem",
}
}
>
<h3>
Cras molestie condimentum
</h3>
</a>
Expand All @@ -96842,20 +96831,8 @@ exports[`Storyshots Components|Table of Contents Dynamic Items 1`] = `
<a
data-title="Praesent fermentum sodales"
name="7"
style={
Object {
"color": "#000",
}
}
>
<h3
style={
Object {
"paddingBottom": "1rem",
"paddingTop": "2rem",
}
}
>
<h3>
Praesent fermentum sodales
</h3>
</a>
Expand All @@ -96871,20 +96848,8 @@ exports[`Storyshots Components|Table of Contents Dynamic Items 1`] = `
<a
data-title="Nulla tristique lacinia"
name="2"
style={
Object {
"color": "#000",
}
}
>
<h3
style={
Object {
"paddingBottom": "1rem",
"paddingTop": "2rem",
}
}
>
<h3>
Nulla tristique lacinia
</h3>
</a>
Expand All @@ -96900,20 +96865,8 @@ exports[`Storyshots Components|Table of Contents Dynamic Items 1`] = `
<a
data-title="Morbi id nibh metus"
name="3"
style={
Object {
"color": "#000",
}
}
>
<h3
style={
Object {
"paddingBottom": "1rem",
"paddingTop": "2rem",
}
}
>
<h3>
Morbi id nibh metus
</h3>
</a>
Expand All @@ -96929,20 +96882,8 @@ exports[`Storyshots Components|Table of Contents Dynamic Items 1`] = `
<a
data-title="Integer non scelerisque"
name="14"
style={
Object {
"color": "#000",
}
}
>
<h3
style={
Object {
"paddingBottom": "1rem",
"paddingTop": "2rem",
}
}
>
<h3>
Integer non scelerisque
</h3>
</a>
Expand Down Expand Up @@ -96982,6 +96923,7 @@ exports[`Storyshots Components|Table of Contents Manually define Menu Items 1`]
data-floating-menu-container=""
role="main"
>
<style />
<TableOfContents
menuItems={null}
menuLabel="Jump to"
Expand Down Expand Up @@ -97136,20 +97078,8 @@ exports[`Storyshots Components|Table of Contents Manually define Menu Items 1`]
<a
data-title="Cras molestie condimentum"
name="8"
style={
Object {
"color": "#000",
}
}
>
<h3
style={
Object {
"paddingBottom": "1rem",
"paddingTop": "2rem",
}
}
>
<h3>
Cras molestie condimentum
</h3>
</a>
Expand All @@ -97165,20 +97095,8 @@ exports[`Storyshots Components|Table of Contents Manually define Menu Items 1`]
<a
data-title="Praesent fermentum sodales"
name="7"
style={
Object {
"color": "#000",
}
}
>
<h3
style={
Object {
"paddingBottom": "1rem",
"paddingTop": "2rem",
}
}
>
<h3>
Praesent fermentum sodales
</h3>
</a>
Expand All @@ -97194,20 +97112,8 @@ exports[`Storyshots Components|Table of Contents Manually define Menu Items 1`]
<a
data-title="Nulla tristique lacinia"
name="2"
style={
Object {
"color": "#000",
}
}
>
<h3
style={
Object {
"paddingBottom": "1rem",
"paddingTop": "2rem",
}
}
>
<h3>
Nulla tristique lacinia
</h3>
</a>
Expand All @@ -97223,20 +97129,8 @@ exports[`Storyshots Components|Table of Contents Manually define Menu Items 1`]
<a
data-title="Morbi id nibh metus"
name="3"
style={
Object {
"color": "#000",
}
}
>
<h3
style={
Object {
"paddingBottom": "1rem",
"paddingTop": "2rem",
}
}
>
<h3>
Morbi id nibh metus
</h3>
</a>
Expand All @@ -97252,20 +97146,8 @@ exports[`Storyshots Components|Table of Contents Manually define Menu Items 1`]
<a
data-title="Integer non scelerisque"
name="14"
style={
Object {
"color": "#000",
}
}
>
<h3
style={
Object {
"paddingBottom": "1rem",
"paddingTop": "2rem",
}
}
>
<h3>
Integer non scelerisque
</h3>
</a>
Expand Down Expand Up @@ -97304,6 +97186,7 @@ exports[`Storyshots Components|Table of Contents With Heading Content 1`] = `
data-floating-menu-container=""
role="main"
>
<style />
<ManuallyDefineMenuItems
parameters={
Object {
Expand Down Expand Up @@ -97711,20 +97594,8 @@ exports[`Storyshots Components|Table of Contents With Heading Content 1`] = `
<a
data-title="Cras molestie condimentum"
name="8"
style={
Object {
"color": "#000",
}
}
>
<h3
style={
Object {
"paddingBottom": "1rem",
"paddingTop": "2rem",
}
}
>
<h3>
Cras molestie condimentum
</h3>
</a>
Expand All @@ -97740,20 +97611,8 @@ exports[`Storyshots Components|Table of Contents With Heading Content 1`] = `
<a
data-title="Praesent fermentum sodales"
name="7"
style={
Object {
"color": "#000",
}
}
>
<h3
style={
Object {
"paddingBottom": "1rem",
"paddingTop": "2rem",
}
}
>
<h3>
Praesent fermentum sodales
</h3>
</a>
Expand All @@ -97769,20 +97628,8 @@ exports[`Storyshots Components|Table of Contents With Heading Content 1`] = `
<a
data-title="Nulla tristique lacinia"
name="2"
style={
Object {
"color": "#000",
}
}
>
<h3
style={
Object {
"paddingBottom": "1rem",
"paddingTop": "2rem",
}
}
>
<h3>
Nulla tristique lacinia
</h3>
</a>
Expand All @@ -97798,20 +97645,8 @@ exports[`Storyshots Components|Table of Contents With Heading Content 1`] = `
<a
data-title="Morbi id nibh metus"
name="3"
style={
Object {
"color": "#000",
}
}
>
<h3
style={
Object {
"paddingBottom": "1rem",
"paddingTop": "2rem",
}
}
>
<h3>
Morbi id nibh metus
</h3>
</a>
Expand All @@ -97827,20 +97662,8 @@ exports[`Storyshots Components|Table of Contents With Heading Content 1`] = `
<a
data-title="Integer non scelerisque"
name="14"
style={
Object {
"color": "#000",
}
}
>
<h3
style={
Object {
"paddingBottom": "1rem",
"paddingTop": "2rem",
}
}
>
<h3>
Integer non scelerisque
</h3>
</a>
Expand Down
10 changes: 9 additions & 1 deletion packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import DataContent from './data/DataContent';
import Image from '../../Image/Image';
import React from 'react';
import readme from '../README.stories.mdx';
import styles from './TableOfContents.stories.scss';
import TableOfContents from '../TableOfContents';

const sources = [
Expand All @@ -33,7 +34,14 @@ const longDescription = 'Lorem Ipsum Dolor';

export default {
title: 'Components|Table of Contents',

decorators: [
story => (
<>
<style>{styles.cssText}</style>
{story()}
</>
),
],
parameters: {
...readme.parameters,
},
Expand Down
19 changes: 19 additions & 0 deletions packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
//
// Copyright IBM Corp. 2020
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/colors/colors';
@import 'carbon-components/scss/globals/scss/typography';

a[name] {
display: block;
color: $text-01;
}

h3 {
padding-top: rem(16px);
padding-bottom: rem(32px);
}
Loading

0 comments on commit d5ad20a

Please sign in to comment.