customize card colors

prabhuignoto · Nov 15, 2020 · a39c3e0 · a39c3e0
1 parent e4007e8
commit a39c3e0
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -335,7 +335,7 @@ The `itemWidth` prop can be used to set the width of each individual timeline se
 Customize colors with `theme` prop.
 
 ```sh
-<chrono items={items}  theme={{primary: "red", secondary: "blue" }} />
+<chrono items={items}  theme={{primary: "red", secondary: "blue", cardBgColor: "yellow", cardForeColor: "violet" }} />
 ```
 
 ## 📦 CodeSandbox Examples

diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
     "@snowpack/plugin-react-refresh": "^2.3.7",
     "@snowpack/plugin-typescript": "^1.1.0",
     "@snowpack/web-test-runner-plugin": "^0.1.4",
-    "@testing-library/jest-dom": "^5.11.5",
+    "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.1.2",
     "@testing-library/user-event": "^12.2.2",
     "@types/classnames": "^2.2.11",
@@ -84,7 +84,7 @@
     "react-is": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.33.1",
+    "rollup": "^2.33.2",
     "rollup-plugin-postcss": "^3.1.8",
     "rollup-plugin-typescript2": "^0.29.0",
     "snowpack": "^2.17.1",

diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -18,10 +18,7 @@ const Chrono: React.FunctionComponent<Partial<TimelineProps>> = ({
   disableNavOnKey = false,
   slideShow = false,
   slideItemDuration = 5000,
-  theme = {
-    primary: '#0f52ba',
-    secondary: '#ffdf00',
-  },
+  theme,
   cardHeight = 200,
   hideControls = false,
   scrollable = true,
@@ -34,6 +31,16 @@ const Chrono: React.FunctionComponent<Partial<TimelineProps>> = ({
   const [slideShowActive, setSlideshowActive] = useState(false);
   const [activeTimelineItem, setActiveTimelineItem] = useState(0);
 
+  const customTheme = Object.assign(
+    {
+      primary: '#0f52ba',
+      secondary: '#ffdf00',
+      cardBgColor: '#fff',
+      cardForeColor: '#000',
+    },
+    theme,
+  );
+
   const initItems = () =>
     items && items.length
       ? items.map((item, index) => {
@@ -135,7 +142,7 @@ const Chrono: React.FunctionComponent<Partial<TimelineProps>> = ({
       slideShow={slideShow}
       slideShowEnabled={slideShow}
       slideShowRunning={slideShowActive}
-      theme={theme}
+      theme={customTheme}
       flipLayout={flipLayout}
     />
   );

diff --git a/src/components/timeline-elements/timeline-card-content/timeline-card-content.styles.ts b/src/components/timeline-elements/timeline-card-content/timeline-card-content.styles.ts
@@ -10,7 +10,7 @@ export const TimelineItemContentWrapper = styled.section<{
   mode?: TimelineMode;
 }>`
   align-items: flex-start;
-  background: #fff;
+  background: ${(p) => p.theme.cardBgColor};
   border-radius: 4px;
   display: flex;
   filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));
@@ -45,7 +45,7 @@ export const TimelineContentSubTitle = styled.p<{
 `;
 
 export const TimelinecardTitle = styled.p<{ theme: Theme; dir?: string }>`
-  color: #323232;
+  color: ${(p) => p.theme.cardForeColor};
   font-size: 1rem;
   font-weight: 600;
   margin: 0;
@@ -58,8 +58,8 @@ export const TimelinecardTitle = styled.p<{ theme: Theme; dir?: string }>`
   width: 95%;
 `;
 
-export const TimelineContentDetails = styled.p`
-  color: #191919;
+export const TimelineContentDetails = styled.p<{ theme?: Theme }>`
+  color: ${(p) => p.theme.cardForeColor};
   font-size: 0.85rem;
   font-weight: 400;
   margin: 0;

diff --git a/src/components/timeline-elements/timeline-card-content/timeline-card-content.tsx b/src/components/timeline-elements/timeline-card-content/timeline-card-content.tsx
@@ -257,6 +257,7 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> = React
             <TimelineContentDetails
               className={showMore ? 'active' : ''}
               ref={detailsRef}
+              theme={theme}
             >
               {detailedText}
             </TimelineContentDetails>

diff --git a/src/demo/app-samples.tsx b/src/demo/app-samples.tsx
@@ -75,6 +75,7 @@ export const VerticalBasic: FunctionComponent<{
         slideItemDuration={2500}
         scrollable={{scrollbar:   false}}
         flipLayout
+        theme={{cardBgColor:  "#D6EAF8",  cardForeColor:  "blue"}}
       />
     </ComponentContainerTree>
   </Vertical>

diff --git a/src/models/Theme.ts b/src/models/Theme.ts
@@ -1,5 +1,7 @@
 export interface Theme {
-  primary: string;
-  secondary: string;
+  primary?: string;
+  secondary?: string;
   textColor?: string;
+  cardBgColor?: string;
+  cardForeColor?: string;
 }
diff --git a/src/models/TimelineModel.ts b/src/models/TimelineModel.ts
@@ -1,3 +1,4 @@
+import { Theme } from './Theme';
 import { TimelineItemModel } from './TimelineItemModel';
 
 /**
@@ -107,10 +108,7 @@ export interface TimelineProps {
    *   }}
    * @memberof TimelineProps
    */
-  theme?: {
-    primary: string;
-    secondary: string;
-  };
+  theme?: Theme;
   /**
    * Minimum height of the card
    *

diff --git a/yarn.lock b/yarn.lock
@@ -1794,10 +1794,10 @@
     lz-string "^1.4.4"
     pretty-format "^26.6.2"
 
-"@testing-library/jest-dom@^5.11.5":
-  version "5.11.5"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.11.5.tgz#44010f37f4b1e15f9d433963b515db0b05182fc8"
-  integrity sha512-XI+ClHR864i6p2kRCEyhvpVejuer+ObVUF4cjCvRSF88eOMIfqw7RoS9+qoRhyigGswMfT64L6Nt0Ufotxbwtg==
+"@testing-library/jest-dom@^5.11.6":
+  version "5.11.6"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.11.6.tgz#782940e82e5cd17bc0a36f15156ba16f3570ac81"
+  integrity sha512-cVZyUNRWwUKI0++yepYpYX7uhrP398I+tGz4zOlLVlUYnZS+Svuxv4fwLeCIy7TnBYKXUaOlQr3vopxL8ZfEnA==
   dependencies:
     "@babel/runtime" "^7.9.2"
     "@types/testing-library__jest-dom" "^5.9.1"
@@ -8072,13 +8072,20 @@ rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2:
   dependencies:
     estree-walker "^0.6.1"
 
-rollup@^2.23.0, rollup@^2.33.1:
+rollup@^2.23.0:
   version "2.33.1"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.33.1.tgz#802795164164ee63cd47769d8879c33ec8ae0c40"
   integrity sha512-uY4O/IoL9oNW8MMcbA5hcOaz6tZTMIh7qJHx/tzIJm+n1wLoY38BLn6fuy7DhR57oNFLMbDQtDeJoFURt5933w==
   optionalDependencies:
     fsevents "~2.1.2"
 
+rollup@^2.33.2:
+  version "2.33.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.33.2.tgz#c4c76cd405a7605e6ebe90976398c46d4c2ea166"
+  integrity sha512-QPQ6/fWCrzHtSXkI269rhKaC7qXGghYBwXU04b1JsDZ6ibZa3DJ9D1SFAYRMgx1inDg0DaTbb3N4Z1NK/r3fhw==
+  optionalDependencies:
+    fsevents "~2.1.2"
+
 rsvp@^4.8.4:
   version "4.8.5"
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"