@titelmedia/bricks-interview - npm Package Compare versions

Comparing version 1.9.0 to 1.10.0

CHANGELOG.md

@@ -6,2 +6,9 @@ # Change Log
 
+# [1.10.0](https://github.com/titel-media/bricks-lerna/compare/v1.9.9...v1.10.0) (2023-03-17)
+
+### Features
+
+- added sticky functionality to interview & additional styles ([5dd98ce](https://github.com/titel-media/bricks-lerna/commit/5dd98cebf005423d67ca0c3c4f76d1ae9ba27df9))
+- Last adjustments for Paragraph and Interview ([27b70d7](https://github.com/titel-media/bricks-lerna/commit/27b70d78e1dd8d322171f9bf34ee4ba7a658109c))
+
 # [1.9.0](https://github.com/titel-media/bricks-lerna/compare/v1.8.8...v1.9.0) (2023-03-09)
@@ -8,0 +15,0 @@

dist/index.js

@@ -16,10 +16,28 @@ "use strict";
   question,
-  answer
+  answer,
+  fontWeight,
+  fontColor,
+  sticky,
+  positioning
 }) => {
   const wrapperRef = (0, _react.useRef)(null);
   const containerRef = (0, _react.useRef)(null);
+  const questionRef = (0, _react.useRef)(null);
+  const answerRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
-    _bricksUtils.gsap.effects.fade(containerRef.current, {
-      trigger: wrapperRef.current
-    });
+    if (containerRef.current) {
+      if (sticky) {
+        let media = _bricksUtils.gsap.matchMedia();
+        media.add('(min-width: 768px)', () => {
+          _bricksUtils.gsap.effects.sticky(wrapperRef.current, {
+            trigger: questionRef.current,
+            endTrigger: answerRef.current,
+            end: 'bottom 15%'
+          });
+        });
+      }
+      _bricksUtils.gsap.effects.fade(containerRef.current, {
+        trigger: wrapperRef.current
+      });
+    }
   }, []);
@@ -29,14 +47,20 @@ return _react.default.createElement("div", {
   }, _react.default.createElement(_bricksTheme.default, null), _react.default.createElement(_styles.Content, {
-    ref: containerRef
-  }, _react.default.createElement("aside", null, _react.default.createElement(_styles.Sticky, null, _react.default.createElement(_styles.Question, {
+    ref: containerRef,
+    positioning: positioning === 'split'
+  }, _react.default.createElement(_styles.Question, {
+    color: (fontColor === null || fontColor === void 0 ? void 0 : fontColor.hex) || '#000000',
+    ref: questionRef,
     dangerouslySetInnerHTML: {
       __html: question
     }
-  }))), _react.default.createElement(_styles.Answer, null, _react.default.createElement("p", {
+  }), _react.default.createElement(_styles.Answer, {
+    color: (fontColor === null || fontColor === void 0 ? void 0 : fontColor.hex) || '#000000',
+    bold: fontWeight === 'bold',
+    ref: answerRef,
     dangerouslySetInnerHTML: {
       __html: answer
     }
-  }))));
+  })));
 };
 exports.Interview = Interview;
 //# sourceMappingURL=index.js.map

dist/styles.js

@@ -6,6 +6,7 @@ "use strict";
 });
-exports.Sticky = exports.Question = exports.Content = exports.Answer = void 0;
+exports.Question = exports.Content = exports.Answer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _typography = require("@titelmedia/bricks-theme/lib/utilities/typography");
 var _layout = require("@titelmedia/bricks-theme/lib/utilities/layout");
+var _breakpoints = require("@titelmedia/bricks-theme/lib/variables/breakpoints");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -15,14 +16,21 @@ const Content = _styledComponents.default.div`
   size: 'lg'
-})}
-  @media (min-width: 768px) {
-    display: grid;
+})};
+  ${props => props.positioning && `
+     & > div {
+      padding-bottom: 20px;
+    }
+   `};
+  @media (min-width: ${_breakpoints.BREAKPOINTS.sm}px) {
+    display: ${props => props.positioning ? 'grid' : 'block'};
     grid-template-columns: 1fr 1fr;
     column-gap: 20px;
   }
+  @media (min-width: ${_breakpoints.BREAKPOINTS.xs}px) {
+    & > div {
+      padding-bottom: 20px;
+    }
+  }
 `;
 exports.Content = Content;
-const Question = _styledComponents.default.p`
-  margin: 0px;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+const Question = _styledComponents.default.div`
   ${(0, _typography.setFont)({
@@ -35,34 +43,26 @@ headline: true
 })}
+  color: ${props => props.color};
   line-height: 110%;
   letter-spacing: -0.03em;
+  margin: 0;
+  &.animation-transform,
+  & > div {
+    will-change: transform;
+  }
 `;
 exports.Question = Question;
-const Sticky = _styledComponents.default.div`
-  /* Add bottom padding to mobile */
-  padding-bottom: 48px;
-
-  /* top is 15px + the header height */
-  @media (min-width: 768px) {
-    position: sticky;
-    padding-bottom: 0;
-    top: 15px; // We will see about the header height
-  }
-`;
-exports.Sticky = Sticky;
 const Answer = _styledComponents.default.div`
-  p {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    margin: 0;
-    line-height: 140%;
-    ${(0, _typography.setFont)({
-  bold: false
-})}
-    ${(0, _typography.setFontSizes)({
+  ${(0, _typography.setFontSizes)({
   xs: '16px',
   xl: '19px'
-})}
-  }
+})};
+  ${props => (0, _typography.setFont)({
+  bold: props.bold,
+  display: props.display
+})};
+  color: ${props => props.color};
+  line-height: 140%;
+  margin: 0;
 `;
 exports.Answer = Answer;
 //# sourceMappingURL=styles.js.map

lib/index.js

 import React, { useEffect, useRef } from 'react';
-import { Answer, Content, Sticky, Question } from './styles';
+import { Answer, Content, Question } from './styles';
 import GlobalFonts from '@titelmedia/bricks-theme';
 import { gsap } from '@titelmedia/bricks-utils';
 
-export const Interview = ({ question, answer }) => {
+export const Interview = ({
+  question,
+  answer,
+  fontWeight,
+  fontColor,
+  sticky,
+  positioning,
+}) => {
   const wrapperRef = useRef(null);
   const containerRef = useRef(null);
+  const questionRef = useRef(null);
+  const answerRef = useRef(null);
 
   useEffect(() => {
-    gsap.effects.fade(containerRef.current, {
-      trigger: wrapperRef.current,
-    });
+    if (containerRef.current) {
+      if (sticky) {
+        let media = gsap.matchMedia();
+        media.add('(min-width: 768px)', () => {
+          gsap.effects.sticky(wrapperRef.current, {
+            trigger: questionRef.current,
+            endTrigger: answerRef.current,
+            end: 'bottom 15%',
+          });
+        });
+      }
+      gsap.effects.fade(containerRef.current, {
+        trigger: wrapperRef.current,
+      });
+    }
   }, []);
@@ -19,11 +40,14 @@
       <GlobalFonts />
-      <Content ref={containerRef}>
-        <aside>
-          <Sticky>
-            <Question dangerouslySetInnerHTML={{ __html: question }} />
-          </Sticky>
-        </aside>
-        <Answer>
-          <p dangerouslySetInnerHTML={{ __html: answer }} />
-        </Answer>
+      <Content ref={containerRef} positioning={positioning === 'split'}>
+        <Question
+          color={fontColor?.hex || '#000000'}
+          ref={questionRef}
+          dangerouslySetInnerHTML={{ __html: question }}
+        />
+        <Answer
+          color={fontColor?.hex || '#000000'}
+          bold={fontWeight === 'bold'}
+          ref={answerRef}
+          dangerouslySetInnerHTML={{ __html: answer }}
+        />
       </Content>
@@ -30,0 +54,0 @@ </div>

lib/styles.js

@@ -7,16 +7,26 @@ import styled from 'styled-components';
 import { setContainer } from '@titelmedia/bricks-theme/lib/utilities/layout';
+import { BREAKPOINTS } from '@titelmedia/bricks-theme/lib/variables/breakpoints';
 
 export const Content = styled.div`
-  ${setContainer({ size: 'lg' })}
-  @media (min-width: 768px) {
-    display: grid;
+  ${setContainer({ size: 'lg' })};
+  ${props =>
+    props.positioning &&
+    `
+     & > div {
+      padding-bottom: 20px;
+    }
+   `};
+  @media (min-width: ${BREAKPOINTS.sm}px) {
+    display: ${props => (props.positioning ? 'grid' : 'block')};
     grid-template-columns: 1fr 1fr;
     column-gap: 20px;
   }
+  @media (min-width: ${BREAKPOINTS.xs}px) {
+    & > div {
+      padding-bottom: 20px;
+    }
+  }
 `;
 
-export const Question = styled.p`
-  margin: 0px;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+export const Question = styled.div`
   ${setFont({ headline: true })}
@@ -27,15 +37,9 @@ ${setFontSizes({
   })}
+  color: ${props => props.color};
   line-height: 110%;
   letter-spacing: -0.03em;
-`;
-
-export const Sticky = styled.div`
-  /* Add bottom padding to mobile */
-  padding-bottom: 48px;
-
-  /* top is 15px + the header height */
-  @media (min-width: 768px) {
-    position: sticky;
-    padding-bottom: 0;
-    top: 15px; // We will see about the header height
+  margin: 0;
+  &.animation-transform,
+  & > div {
+    will-change: transform;
   }
@@ -45,10 +49,14 @@ `;
 export const Answer = styled.div`
-  p {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    margin: 0;
-    line-height: 140%;
-    ${setFont({ bold: false })}
-    ${setFontSizes({ xs: '16px', xl: '19px' })}
-  }
+  ${setFontSizes({
+    xs: '16px',
+    xl: '19px',
+  })};
+  ${props =>
+    setFont({
+      bold: props.bold,
+      display: props.display,
+    })};
+  color: ${props => props.color};
+  line-height: 140%;
+  margin: 0;
 `;

package.json

 {
   "name": "@titelmedia/bricks-interview",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "> TODO: description",
@@ -31,3 +31,3 @@ "author": "highsnob",
   },
-  "gitHead": "821c55b5aee0c3c72b42c632fab502d634212354"
+  "gitHead": "b48493420dfbec9d360353b3779f9df96c1c0965"
 }

No alert changes

Improved metrics

Total package byte prevSize

28726

14.49%

Lines of code

241

32.42%

No dependency changes