@titelmedia/xtras-tabs - npm Package Compare versions

Comparing version 0.1.11 to 0.1.12

CHANGELOG.md

@@ -6,4 +6,12 @@ # Change Log
 
+## [0.1.12](https://github.com/titel-media/bricks-lerna/compare/v0.1.11...v0.1.12) (2021-12-20)
+
+**Note:** Version bump only for package @titelmedia/xtras-tabs
+
+
+
+
+
 ## [0.1.11](https://github.com/titel-media/bricks-lerna/compare/v0.1.10...v0.1.11) (2021-12-13)
 
 **Note:** Version bump only for package @titelmedia/xtras-tabs

dist/index.js

@@ -12,6 +12,8 @@ "use strict";
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _bricksTheme = _interopRequireDefault(require("@titelmedia/bricks-theme"));
 
 var _all = require("gsap/all");
 
+var _styles = require("./styles");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,24 +29,5 @@
 
-const TabsWrapper = _styledComponents.default.nav`
-  display: flex;
-  width: 100%;
-  z-index: 2;
-  position: relative;
-`;
-const TabItem = _styledComponents.default.button`
-  flex-basis: 0;
-  flex-grow: 1;
-  border: 1px solid ${props => props.isActive ? 'red' : 'grey'};
-`;
-const sampleSections = [{
-  id: 'section--0',
-  displayName: 'Name Surname'
-}, {
-  id: 'section--1',
-  displayName: 'Another One'
-}];
-
 const Tabs = ({
   style,
-  propSections
+  sections
 }) => {
@@ -55,3 +38,2 @@ const [current, setCurrent] = (0, _react.useState)(null);
   const sectionTlsRef = (0, _react.useRef)([]);
-  const sections = propSections || sampleSections;
   sectionTlsRef.current = Array(sections.length).fill().map((_, i) => sectionTlsRef.current[i] || (0, _react.createRef)());
@@ -111,5 +93,5 @@
   }, []);
-  return _react.default.createElement(TabsWrapper, {
+  return _react.default.createElement("div", null, _react.default.createElement(_bricksTheme.default, null), _react.default.createElement(_styles.TabsWrapper, {
     ref: pinRef
-  }, sections.map((section, index) => _react.default.createElement(TabItem, {
+  }, sections.map((section, index) => _react.default.createElement(_styles.TabItem, {
     key: `tab-item--${index}`,
@@ -120,3 +102,3 @@ isActive: current === index,
     }
-  }, section.displayName)));
+  }, _react.default.createElement("span", null, " ", section === null || section === void 0 ? void 0 : section.displayName)))));
 };
@@ -123,0 +105,0 @@

dist/styles.js

 "use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabsWrapper = exports.TabItem = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _typography = require("@titelmedia/bricks-theme/lib/utilities/typography");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const TabsWrapper = _styledComponents.default.nav`
+  display: flex;
+  width: 100%;
+  z-index: 2;
+  position: relative;
+`;
+exports.TabsWrapper = TabsWrapper;
+const TabItem = _styledComponents.default.button`
+  flex-basis: 0;
+  flex-grow: 1;
+  font-family: 'univers-regular', sans-serif;
+  padding: 12px 12px;
+  color: white;
+
+  background: black;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  border: none;
+  outline: none;
+  cursor: pointer;
+
+  span {
+    border-bottom: 1px solid
+      ${props => props.isActive ? 'white' : 'transparent'};
+  }
+
+  &:hover {
+  }
+  ${() => (0, _typography.setFontSizes)({
+  mobile: '12px',
+  tablet_vertical: '12px'
+})};
+`;
+exports.TabItem = TabItem;
 //# sourceMappingURL=styles.js.map

lib/index.js

 import React, { useEffect, useRef, useState, createRef } from 'react';
 import { forEach } from 'lodash';
-import styled from 'styled-components';
+
+import GlobalFonts from '@titelmedia/bricks-theme';
 import { gsap, ScrollTrigger, ScrollToPlugin } from 'gsap/all';
+import { TabsWrapper, TabItem } from './styles';
+
 gsap.registerPlugin(ScrollTrigger);
@@ -15,21 +18,3 @@ gsap.registerPlugin(ScrollToPlugin);
 
-const TabsWrapper = styled.nav`
-  display: flex;
-  width: 100%;
-  z-index: 2;
-  position: relative;
-`;
-
-const TabItem = styled.button`
-  flex-basis: 0;
-  flex-grow: 1;
-  border: 1px solid ${props => (props.isActive ? 'red' : 'grey')};
-`;
-
-const sampleSections = [
-  { id: 'section--0', displayName: 'Name Surname' },
-  { id: 'section--1', displayName: 'Another One' },
-];
-
-const Tabs = ({ style, propSections }) => {
+const Tabs = ({ style, sections }) => {
   const [current, setCurrent] = useState(null);
@@ -39,3 +24,2 @@ const pinRef = useRef(null);
   const sectionTlsRef = useRef([]);
-  const sections = propSections || sampleSections;
 
@@ -102,15 +86,18 @@ sectionTlsRef.current = Array(sections.length)
   return (
-    <TabsWrapper ref={pinRef}>
-      {sections.map((section, index) => (
-        <TabItem
-          key={`tab-item--${index}`}
-          isActive={current === index}
-          onClick={() => {
-            onTabClick(section.id);
-          }}
-        >
-          {section.displayName}
-        </TabItem>
-      ))}
-    </TabsWrapper>
+    <div>
+      <GlobalFonts />
+      <TabsWrapper ref={pinRef}>
+        {sections.map((section, index) => (
+          <TabItem
+            key={`tab-item--${index}`}
+            isActive={current === index}
+            onClick={() => {
+              onTabClick(section.id);
+            }}
+          >
+            <span> {section?.displayName}</span>
+          </TabItem>
+        ))}
+      </TabsWrapper>
+    </div>
   );
@@ -117,0 +104,0 @@ };

package.json

 {
   "name": "@titelmedia/xtras-tabs",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "xtras tab navigation component",
@@ -23,5 +23,6 @@ "author": "highsnob",
   "dependencies": {
+    "@titelmedia/bricks-theme": "^0.1.12",
     "gsap": "^3.8.0"
   },
-  "gitHead": "248e07b9e0812779d6dec68df42e39675d793cfd"
+  "gitHead": "e634ff5c59e06e5c444362a7f89ef8140fa36b63"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17394

increased by13.79%

Lines of code

259

increased by19.91%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Added@titelmedia/bricks-theme@^0.1.12

• + Added@ampproject/remapping@2.3.0(transitive)

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/compat-data@7.26.2(transitive)

• + Added@babel/core@7.26.0(transitive)

• + Added@babel/generator@7.26.2(transitive)

• + Added@babel/helper-annotate-as-pure@7.25.9(transitive)

• + Added@babel/helper-compilation-targets@7.25.9(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-module-transforms@7.26.0(transitive)

• + Added@babel/helper-plugin-utils@7.25.9(transitive)

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/helper-validator-option@7.25.9(transitive)

• + Added@babel/helpers@7.26.0(transitive)

• + Added@babel/parser@7.26.2(transitive)

• + Added@babel/plugin-syntax-jsx@7.25.9(transitive)

• + Added@babel/template@7.25.9(transitive)

• + Added@babel/traverse@7.25.9(transitive)

• + Added@babel/types@7.26.0(transitive)

• + Added@emotion/is-prop-valid@1.3.1(transitive)

• + Added@emotion/memoize@0.9.0(transitive)

• + Added@emotion/stylis@0.8.5(transitive)

• + Added@emotion/unitless@0.7.5(transitive)

• + Added@jridgewell/gen-mapping@0.3.5(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@titelmedia/bricks-theme@0.1.21(transitive)

• + Addedbabel-plugin-styled-components@2.1.4(transitive)

• + Addedbrowserslist@4.24.2(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcaniuse-lite@1.0.30001677(transitive)

• + Addedconvert-source-map@2.0.0(transitive)

• + Addedcss-color-keywords@1.0.0(transitive)

• + Addedcss-to-react-native@3.2.0(transitive)

• + Addeddebug@4.3.7(transitive)

• + Addedelectron-to-chromium@1.5.51(transitive)

• + Addedescalade@3.2.0(transitive)

• + Addedgensync@1.0.0-beta.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedhoist-non-react-statics@3.3.2(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedjsesc@3.0.2(transitive)

• + Addedjson5@2.2.3(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedlru-cache@5.1.1(transitive)

• + Addedms@2.1.3(transitive)

• + Addednode-releases@2.0.18(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpicomatch@2.3.1(transitive)

• + Addedpostcss-value-parser@4.2.0(transitive)

• + Addedreact@17.0.2(transitive)

• + Addedreact-dom@17.0.2(transitive)

• + Addedreact-is@16.13.118.3.1(transitive)

• + Addedscheduler@0.20.2(transitive)

• + Addedsemver@6.3.1(transitive)

• + Addedshallowequal@1.1.0(transitive)

• + Addedstyled-components@5.3.11(transitive)

• + Addedsupports-color@5.5.0(transitive)

• + Addedupdate-browserslist-db@1.1.1(transitive)

• + Addedyallist@3.1.1(transitive)