@protacon/arrow-ui-react-components - npm Package Compare versions

Comparing version 4.3.1 to 4.4.0

package.json

 {
   "name": "@protacon/arrow-ui-react-components",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "private": false,
@@ -5,0 +5,0 @@ "main": "build/lib/index.js",

src/lib/index.ts

@@ -30,1 +30,2 @@ export { Button } from './Button'
 export { Breadcrumb } from './Breadcrumb'
+export { LanguageSelect } from './LanguageSelect'

stories/data.js

@@ -63,2 +63,7 @@ import React from 'react'
 
+export const languageOptions = {
+  current: 'fi-FI',
+  languages: ['en-US', 'fi-FI', 'ww-WW'],
+}
+
 export const SwitchRendererOptions = {
@@ -75,2 +80,3 @@ option1: <div>Option 1</div>,
     content: 'Lorem ipsum dolor sit amet',
+    id: 'eka',
   },
@@ -85,2 +91,3 @@ {
     ),
+    id: 'toka',
   },
@@ -90,2 +97,3 @@ {
     content: <h1>Some more JSX</h1>,
+    id: 'kolmas',
   },
@@ -92,0 +100,0 @@ ]

stories/TabNavigation.stories.js

@@ -1,26 +0,49 @@
-import React from "react"
-import { storiesOf } from "@storybook/react"
+import React from 'react'
+import { storiesOf } from '@storybook/react'
 
-import { Usage, Container } from "./helpers"
-import { TabNavigation } from "../build/lib"
-import { tabs } from "./data"
+import { Usage, Container } from './helpers'
+import { TabNavigation } from '../build/lib'
+import { tabs } from './data'
 
-storiesOf("TabNavigation", module)
-  .add("Default", () => (
-    <div>
-      <Container>
-        <div style={{ margin: 24, color: '#fff'}}>
-          <TabNavigation
-            tabs={tabs}
-            selectStyle={{ justifyContent: 'left' }}
-          />
-        </div>
-      </Container>
-      <Usage
-        title="How to use"
-        code={`
+export class TabNavigationWrapper extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      currentTab: 'eka',
+    }
+  }
+
+  render() {
+    const { currentTab } = this.state
+    return (
+      <div>
+        <Container>
+          <div style={{ margin: 24, color: '#fff' }}>
+            <TabNavigation
+              tabs={tabs}
+              id={currentTab}
+              selectStyle={
+                currentTab == 'kolmas'
+                  ? { color: '#e7a1ff' }
+                  : currentTab == 'toka'
+                  ? { color: '#fadf96' }
+                  : { color: '#94f7e7' }
+              }
+              onTabChange={index => {
+                this.setState({
+                  currentTab: tabs[index].id,
+                })
+              }}
+            />
+          </div>
+        </Container>
+        <Usage
+          title="How to use"
+          code={`
   const tabs = [{
+    id: 'eka',
     title: 'Lorem',
     content: 'Lorem ipsum dolor sit amet'
   }, {
+    id: 'toka',
     title: <span>Ipsum</span>,
@@ -34,2 +57,3 @@ content: (
   }, {
+    id: 'kolmas',
     title: 'Dolor',
@@ -46,3 +70,3 @@ content: (
         `}
-        props={`
+          props={`
   interface Props {
@@ -52,3 +76,5 @@ tabs: Array<{
       content: JSX.Element,
+      id?: string
     }>
+    id?: string
     onTabChange?: (tabIndex: number) => void,
@@ -59,6 +85,8 @@ selectStyle?: React.CSSProperties,
         `}
-      />
+        />
+      </div>
+    )
+  }
+}
 
-    </div>
-  ))
-  ;
+storiesOf('TabNavigation', module).add('TabNavigation', () => <TabNavigationWrapper />)

types.d.ts

@@ -54,2 +54,3 @@ import * as React from 'react'
     searchable?: boolean
+    dropup?: boolean
     searchFunction?: (value: VALUE, searchTerm: string) => boolean
@@ -185,3 +186,5 @@ t?: (key: string, options?: any) => string
       content: JSX.Element
+      id?: string
     }>
+    id?: string
     onTabChange?: (tabIndex: number) => void
@@ -371,1 +374,17 @@ selectStyle?: React.CSSProperties
 export declare const Breadcrumb: React.FC<Breadcrumb.Props>
+
+export declare namespace LanguageSelect {
+  export type LanguageOptions = {
+    current: string
+    languages: string[]
+  }
+
+  export type Props = {
+    className: string
+    languages: LanguageOptions
+    onSelect: (values: string | string[], selectedValue: Select.SelectValue) => void
+    dropup?: boolean
+  }
+}
+
+export declare const LanguageSelect: React.FC<LanguageSelect.Props>

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

137330

decreased by-47.65%

Number of package files

111

decreased by-44.22%

Lines of code

3493

decreased by-33.57%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes