kiwicom / orbit

React components of open-source Orbit design system by Kiwi.com

Orbit-components is a React component library that provides developers with the easiest possible way of building Kiwi.com’s products.

---

Orbit Mission

Orbit aims to bring order and consistency to all of our products and processes. We elevate user experience and increase the speed and efficiency of how we design and build products.

Installation

orbit-components is served as an npm package.

Add them to your project by running:

// with npm
npm install @kiwicom/orbit-components

// with yarn
yarn add @kiwicom/orbit-components

Usage

1. Import fonts that are used in orbit-components:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700"
  rel="stylesheet"
/>

Or via CSS:

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700");

2. Include any of our components in your project and use it:

import Alert from "@kiwicom/orbit-components/lib/Alert";

<Alert>Hello World!</Alert>;

If you want to use custom theme inside your project, it's necessary to wrap your app into <OrbitProvider>. See this document for more information.

For live preview check out Storybook or orbit.kiwi.

You can also try orbit-components live on CodeSandbox.

Documentation

For full documentation, visit orbit.kiwi.

Typescript

Orbit comes with Typescript definitions files.

Tailwind CSS

Orbit uses Tailwind CSS for styling. Tailwind must be installed in your project to see Orbit components styled correctly.

The @kiwicom/orbit-tailwind-preset package provides the Tailwind CSS configuration used in Orbit.

Check the Orbit official documentation for more information on how to set up Tailwind CSS in your project.

Main Sections

• Components
• Icons
• Right to left languages
• Theming

Contributing

We are working on making this project a fully open source. We appreciate any contributions you might make.

Bug reports and feature requests are welcome but, please use the correct template.

Please check out our Contribution Guide. It includes contribution guidelines and information on how to run and develop the project.

Feedback

We want to provide only components of the highest quality. We can’t do that without your feedback. If you have any suggestions about what we can do to improve components, please report it directly as an issue.

orbit's Issues

Select box

• Select box can be optionally preceded with a label on top.
• Optional placeholder prop, which sets the select to blank.
• Optional function passed as props to be called onChange.
• Each option in the select can have a disabled attribute -> Doesn't render it or greys it out.
• Error reporting http://zpl.io/2yBmG3o
  • Red border around box
  • Error message red font below box. Smaller font.
• Select label has DarkGray color if no value is selected, otherwise LightGray
• Select fontColor is MiddleGray color if no value is selected, otherwise DarkGray.
• Replace native dropdown icon with @kiwicom/icons/ChevronUp icon.
• Add tests.
  • Test onChange callback.
  • Test rendering via jest snapshots.

Example:

Error reporting:

Button component. Import fontColors from constants. Allow for different font-weight variants

Typography allowed by Button is limited. Re-factor so:

• We import fontColors from constants.
• Allow variable font-weight for the fonts https://github.com/kiwicom/orbit-components/blob/master/src/Button/index.js#L43

Maybe we could just render a Typography component as a child of button, if that is considered correct syntax in HTML5?

After discussing this with @FilipMessa, his suggestion to use children sounds like the best approach.
Eg.

<Button type='primary' >
   <Typography type='attention' variant='bold'> I am a bold button </Typography>
</Button>
// --> Renders a <Typography> inside the button tag

<Button type='primary' title='I am a simple button' />
// --> Just renders text inside the button

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

Improve Readme and Templates

• Move development documentation into development readme
• Update development readme with notes from #74
• Update Issue and Pull Request templates to correspond with #73
• Update docs following github pages exporting #96
• Broken links #210
• Update Icons documentation

Add Storyshots

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

We should automatically create snapshots from Storybook to prevent Storybook breaking.

https://github.com/storybooks/storybook/tree/master/addons/storyshots

Fix the header font size

Since the Typography component now has a default font-size, we can't override it in style of the container.

---

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

Create <TextLink /> component

Description

Link is used usually in the paragraph text to show that something navigates you to another location.

Visual style

Parameters

Parameter	Values	Default
Style	Primary, Secondary	Primary
External	[boolean]	false

Note: When external is true, it opens links in new tab/window.

Design tokens

For all configurations:
font-weight: $fontWeightLinks

Based on selected configuration:

Parameter:Value	property: $token
Style:Primary	color: $colorLinkPrimary
Style:Secondary	color: $colorLinkSecondary text-decoration: underline // token not needed, just visual change

Hover behavior

There are two things that will happen when the user hovers any link:

• Underline appears
• The text color will change to the darker version of $colorLinkPrimary color (for both styles, actually). For darkening percentage use design token $modifierDarkenHover

Other things to mention

• If it’s possible, it should be used only inside <Text> or <Headline> components and it should inherit Size from parent text.
• We are showing pointer cursor for every link
• For the visited state of links, please use original link color (at least for now, it’s possible that this will change in future).
• For focus state please keep outline there, until we decide what to do next with visited and focus state.

Some inspiration from other’s React components for heading component:

https://polaris.shopify.com/components/navigation/link
https://instacart.github.io/Snacks/#link-1
http://grommet.io/docs/anchor
http://design-system.pluralsight.com/components/link/
http://www.jetbrains.org/ring-ui/link.html

Deploy Storybook to Github pages

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

[Global] Forbid 'Function' and 'Object' types

Those types are too vague. any has its use cases, but:

• Function is basically (...args: any[]) => any
• Object is basically { [key: string]: any }

Which is too unspecific for the majority of use cases.

Create <Text /> component

Description

The most basic component for rendering text blocks.

Visual style

Parameters

We should be able to render all of these styles with the combination of parameters from the table below.

Parameter	Values	Default
Style	Primary, Secondary, Attention	Primary
Size	Large, Normal, Small	Normal
Weight	bold, normal	normal
Italic	[boolean]	false
Uppercase	[boolean]	false
Element	p, span, div, (anything else?)	p

Design tokens

For all configurations:

font-family: $fontFamily
line-height: $lineHeightText

Based on selected configuration:

Parameter:Value	property: $token
Style:Primary [optional]	color: $colorTextPrimary
Style:Secondary [optional]	color: $colorTextSecondary
Style:Attention [optional]	color: $colorTextAttention
Size:Large [optional]	font-size: $fontSizeTextLarge
Size:Normal [optional]	font-size: $fontSizeTextNormal
Size:Small [optional]	font-size: $fontSizeTextSmall
Weight:normal [optional]	font-weight: $fontWeightNormal
Weight:bold [optional]	font-weight: $fontWeightBold

Italic and uppercase don't need tokens as they aren’t expressed with numeric values.

Possible examples of configuration:

<Text>A) <strong>We're here for you.</strong> First, let's narrow down your request.</Text>
<Text Element="div" Italic>B) We're here for you. First, let's narrow down your request.</Text>

Rendered HTML on those configurations:

<p>A) <strong>We're here for you.</strong> First, let's narrow down your request.</p>
<div><em>B) We're here for you.</strong> First, let's narrow down your request.</em></div>

Note: Please take this just as my component interpretation for better understanding how I meant which param. I am totally not sure about <strong> though, but it should be possible to make just part of the text bold (or link in other cases). I don’t have to include “real” code, just give me a feedback how you want to specify it and I can do it your way. I won’t be able to add these code examples to more complicated components anyway.

Some inspiration from others React components for solving text component:

We probably don't need to reinvent the wheel, a lot of other teams solved these basics already. I have a good collection of links with some inspiration from other design systems so I can include for every common component so we have something to study and inspire from 🙂​Hope it helps a little! I think that it should be possible to check their Github repositories, some of them can have them public.

https://pricelinelabs.github.io/design-system/Text
http://grommet.io/dxc/docs/paragraph (check Examples button on the right top)
https://cloudflare.github.io/cf-ui/#cf-component-text
http://design-system.pluralsight.com/components/text/
https://seek-oss.github.io/seek-style-guide/text ( + subcomponent for strong, etc.: https://seek-oss.github.io/seek-style-guide/strong)
https://backpack.github.io/components/web/text

BLKN: Textarea

By the design: https://app.zeplin.io/project/5a859818a44a3c0f897647b1/dashboard?q=textarea

Create <Heading /> component

Description

Headings are used for showing content hierarchy and are important for improving the reading experience for our users.

Visual style

Parameters

We should be able to render all of these styles with the combinations of parameters in the table.

Parameter	Values	Default
Size	Display, Size 1, Size 2, Size 3	probably nothing? if we need something, choose Heading 2 as it will be most common
Element	h1, h2, h3, h4, h5, h6, div, (anything else?)	same 🔝
Weight [optional]	bold, medium	bold

Predefined combinations of headings

This is a list of main headings that should be used in our designs. Of course that it's possible to make more combination with different parameters but it's recommended to use these pre-defined headings.

Type	Pre-defined parameters
Heading Display	Size: Display
Heading Level 1	Size: Size 1 Element: h1
Heading Level 2	Size: Size 2 Weight: medium
Heading Level 3	Size: Size 3 Weight: medium

_If some parameter is not pre-defined, just use the default value for that parameter.

Design tokens

For all configurations:

font-family: $fontFamily
line-height: $lineHeightHeading
color: $colorHeading

Based on selected configuration:

Parameter:Value	property: $token
Size:Display	font-size: $fontSizeHeadingDisplay
Size:Size 1	font-size: $fontSizeHeadingLarge
Size:Size 2	font-size: $fontSizeHeadingMedium
Size:Size 3	font-size: $fontSizeHeadingSmall
Weight:bold	font-weight: $fontWeightBold
Weight:medium	font-weight: $fontWeightMedium

Important! Parameter “size” is independent of semantic markup. It is possible to call component with the configuration like <Heading Size="Size 1" Element="div">Heading example</Heading>.

Some inspiration from other’s React components for heading component:

https://pricelinelabs.github.io/design-system/Heading
http://grommet.io/dxc/docs/heading (check Examples button on the right top)
https://cloudflare.github.io/cf-ui/#cf-component-heading
http://design-system.pluralsight.com/components/text/ (scroll down a little)
https://seek-oss.github.io/seek-style-guide/text (play with params and switch to headline)
https://backpack.github.io/components/web/text (switching to headline only with params)

Upgrade to @babel

New babel uses a new namespace and approach.

https://github.com/babel/babel

General Input

Create general Input that will be used by all other specific inputs: InputText, InputNumber, ... and use it in all those inputs.

Set up build process

• Output to /lib
• Make index file that exports all components
• Make watch output for development purposes
• Set up prepublish build

Fix icons missing rotation/flipping

Some icons have rotated or flipped variants and currently these variants are not rotated/flipped. The rotation disappeared either during the export to SVG, or during the build process (the build process throws away everything except the content of the defs tag).

Some affected icons:

Maybe there is more, I should walk through the list: https://github.com/kiwicom/react-kiwi-ui/blob/a03a45074d98b800289934c483e446f474ed0d70/icons/icons.md

---

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

InputText

• Rename Input to InputText
• Fixes to the design:
  • When the value is empty, the label has different color
  • When there is an error, the input has different border color

See https://app.zeplin.io/project/5a859818a44a3c0f897647b1/dashboard?q=text%20basic

Move Label component out of Input folder and let it accept for Typography "types"

It seems Label can be used not only for Input-based types but also for other cases such as Select. I suggest to:

• Move Label to its own folder.
• Let Label accept different type props, so the Typography color it is using is more flexible. Currently it can only be either secondary or primary, which is not enough for Select for example.

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

Publishing does not work

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

NPM link: https://www.npmjs.com/package/@kiwicom/balkan-ui
.npmrc: https://github.com/kiwicom/react-kiwi-ui/blob/54e80da8fde5348309c80db708000bcc65efb7a3/blkn/.npmrc
package.json: https://github.com/kiwicom/react-kiwi-ui/blob/54e80da8fde5348309c80db708000bcc65efb7a3/blkn/package.json

Commands used:
npm publish
npm publish --access public

Error in question:

npm ERR! publish Failed PUT 404
npm ERR! code E404
npm ERR! 404 Not found : @kiwicom/balkan-ui
npm ERR! 404
npm ERR! 404  '@kiwicom/balkan-ui' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

Full log: https://gist.github.com/Fallion/d7306c0f787b6a7d175652ab6e8a2958

Related issues:
npm/npm#18569

@kiwicom/orbit-components/icons does not resolve

Since @kiwicom/icons is deprecated, the new way to import icons is documented to be from @kiwicom/orbit-components/icons. But that does not resolve.

We should fix this.

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

BLKN: System messages

There is no directory for system messages in blkn/src
https://app.zeplin.io/project/5a8598936eb267528571d4aa

Props:
Type (error | succes | warning | info)
Icon (boolean)
Title (string with the title)

Title could be also specified as separate component with this.props.children so it's apperance would depend on implemmenting?

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

Create static json file with colors and design tokens definition

For now just static file, it should be in brand config from Nest API in the future. When new token appears, it will be added to this file. There shouldn't be used any hardcoded visual styles in Orbit components. Always use tokens, please. Also, list needed design tokens will be always added to every new component specification.

It is also recommended to use design tokens outside of Orbit components, for your local/project components. I'll talk about it with designers and I believe that we'll find a solution how to specify it for you with designs.

File with design tokens (rename it to a different extension, Github for some reason doesn't support .js/.json files): brandConfig.txt

Configure react/jsx-no-bind properly

The rule react/jsx-no-bind doesn't warn us when we use an arrow function as a prop (eg. <Button onClick={() => {}} />). It should.

---

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

General selector is overridden

Multiple component on the same page causes style is overridden.
Selector should be unique / generated by styled-jsx.

E.g. Typography style is defined

<style jsx>{`
    span {
      font-family: Roboto, -apple-system, sans-serif;
      font-size: ${sizes[props.size]};
      color: ${colors[props.type]};
    }
`}</style>

So last with type <Typography type="primary"> will make all others span with the primary color.

---

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

Provide an optional fontSize param to Typography

Since Typography is a heavily used component, it seems reasonable to add an optional fontSize prop to it here.

Currently we need to have Typography with a size of 28px, as per design requirements. But the designer might well change it to 18px, 26px or any other size not present in the sizes object. Having to submit a new PR for each new fontsize a project might require does not seem very scalable in this case.

I can submit the PR to allow for this optional feature, unless someone disagrees. : )

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

Styled Components vs Styled JSX findings

Aggregation of findings on this topic.

create Table Component

Designs for Table: https://zpl.io/amBvgge

Visual regression testing

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

Theme support

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

For the future it would be helpful to have theme support.

style-guide for colors: https://marvelapp.com/79c0g9e/screen/36355252

<--- Fill in more data -->

ES modules do not work in NextJS

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

ES Module build does not work for NextJS build process.

> Failed to build on /var/folders/gj/pvd_79nd22592rw1nz84s_b00000gn/T/87336003-6ba2-4e1d-a4bc-194225640788
{ Error: bundles/pages/login.js from UglifyJs
Unexpected character '`' [bundles/pages/login.js:462,9]

Add storybook-chrome-screenshot

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

From discussion on #68. It has been decided to use this library instead to test that all stories keep working.

Textarea

https://app.zeplin.io/project/5a859818a44a3c0f897647b1/dashboard?q=textarea

Rebranding

Rebrand to Orbit Components.

Add Icons

Please add all Icons to the Icons project.

Constants.js need update

Colors pallette has been changed in style guide therefore constants.js and all files importing constants.js should be updated.

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

Create <Button /> component

Description

The button is a simple component when we use for showing what actions users can do on the page.

Visual style

Parameters

Parameter	Values	Default
Style	Primary, Secondary, Link, Facebook, Google, Destructive	Primary
Size	Large, Normal, Small	Normal
Icon	[string]	empty
Label	[string]	Your label
Bordered	[boolean]	false
Disabled	[boolean]	false
Loading	[boolean]	false
Width	[string]	auto

Visual design & design tokens

For all configurations

font-family: $fontFamily
border-radius: $borderRadiusNormal
font-weight: $fontWeightBold
min-width: $widthButtonMinimal

Additional information

• Vertical centering for icon and text label
• For all buttons, there should be a transition for changing states (for background color and scale properties)
• Borders in bordered version are inside the button, so the height of the button stays same
• Width is usually calculated automatically (based on length of label + icon width + paddings). However, it should be possible to set up width manually so there is a chance to have two same-width buttons when placed near each other.
• All buttons should disable all the default browser styling so it doesn’t mess with our own visual style (http://www.456bereastreet.com/i/button_d.png)

Based on selected configuration:

Parameter:Value	property: $token
Style:Primary	text color: $colorTextButtonPrimary icon color: $colorIconButtonPrimary background: $backgroundButtonPrimary For bordered version: text color: $colorTextButtonPrimaryBordered icon color: $colorIconButtonPrimaryBordered background: $backgroundButtonBordered border-color: $borderColorButtonPrimaryBordered
Style:Secondary	text color: $colorTextButtonSecondary icon color: $colorIconButtonSecondary background: $backgroundButtonSecondary For bordered version: text color: $colorTextButtonSecondaryBordered icon color: $colorIconButtonSecondaryBordered background: $backgroundButtonBordered border-color: $borderColorButtonSecondaryBordered
Style:Link	text color: $colorTextButtonLink icon color: $colorIconButtonLink background: $backgroundButtonLink For bordered version: N/A (there is no bordered version for this so if someone enable this style together with “bordered”, we'll just ignore it?)
Style:Facebook	text color: $colorTextButtonFacebook icon color: $colorIconButtonFacebook background: $backgroundButtonFacebook For bordered version: text color: $colorTextButtonFacebookBordered icon color: $colorIconButtonFacebookBordered background: $backgroundButtonBordered border-color: $borderColorButtonFacebookBordered
Style:Google	text color: $colorTextButtonGoogle icon color: $colorIconButtonGoogle background: $backgroundButtonGoogle For bordered version: text color: $colorTextButtonGoogleBordered icon color: $colorIconButtonGoogleBordered background: $backgroundButtonBordered border-color: $borderColorButtonGoogleBordered
Style:Destructive	text color: $colorTextButtonDestructive icon color: $colorIconButtonDestructive background: $backgroundButtonDestructive For bordered version: text color: $colorTextButtonDestructiveBordered icon color: $colorIconButtonDestructiveBordered background: $backgroundButtonBordered border-color: $borderColorButtonDestructiveBordered
Size:Large	font-size: $fontSizeTextLarge height: $heightButtonLarge padding-left: $paddingButtonLarge padding-right: $paddingButtonLarge When button has icon: padding-left: $paddingButtonLargeWithIcon Styles for inserted icon: height: $heightIconMedium width: $widthtIconMedium margin-right: $marginButtonIconLarge
Size:Normal	font-size: $fontSizeTextNormal height: $heightButtonNormal padding-left: $paddingButtonNormal padding-right: $paddingButtonNormal When button has icon: padding-left: $paddingButtonNormalWithIcon Styles for inserted icon: height: $heightIconMedium width: $widthtIconMedium margin-right: $marginButtonIconNormal
Size:Small	font-size: $fontSizeTextSmall height: $heightButtonSmall padding-left: $paddingButtonSmall padding-right: $paddingButtonSmall When button has icon: padding-left: $paddingButtonSmallWithIcon Styles for inserted icon: height: $heightIconSmall width: $widthtIconSmall margin-right: $marginButtonIconSmall
Loading:true	Nothing so special, it's basically just a button with specific icon. For this, we'll use animated icon from our old button: Loading button in storybook

Pre-defined configurations

There is few combination we can predefine. All this configuration matches names and look for Sketch symbols from our Orbit UI kit. It should also help with handing designs over to product teams.

This gives us also possibility that for eg. when we change the default icon for a destructive button will be “cross” instead of “remove”, that we don’t need to go through all instances and change it everywhere. We just change that pre-defined configuration for “Destructive button” have “icon” parameter set to “cross” and it’ll change everywhere.

Type	Pre-defined parameters	Usually working with
Primary button	Style: Primary Size: Normal	Size Label Disabled Loading
Primary button with icon	Style: Primary Size: Normal Icon: “plus-circle”	Size Label Disabled Loading
Secondary button	Style: Secondary Size: Normal	Size Label Icon Disabled Loading
Secondary button with icon	Style: Secondary Size: Normal Icon: “plus-circle”	Size Label Icon Disabled Loading
Destructive	Style: Destructive Size: Normal Icon: “remove”	Size Label Disabled Loading
Destructive Light	Style: Destructive Size: Small Bordered: true Icon: “remove”	Size Label Disabled Loading
Facebook	Style: Facebook Size: Normal Icon: “facebook”	Size Label Disabled Loading
Google	Style: Google Size: Normal Icon: “google”	Size Label Disabled Loading
Button Link	Style: Link Size: Small Icon: “plus-circle”	Size Label Disabled Loading

Of course that is possible to define custom configuration but it won’t be recommended and if we decide that we need to use eg. light variants of our buttons more, we can always add another pre-defined state.

Hover & active button states

You can check interactions on this link, Version 5 is the one we choosed: https://codepen.io/darkwindcz/pen/mxJmbP

When are buttons hovered, we use darken() function for background colors for our button backgrounds in most cases, e.g. darken([original-color], $modifierDarkenHover). Same darken modifier is used for text and border colors when button is in “Bordered” version.

When are buttons active, we use darken() function for background colors for our button backgrounds in most cases, e.g. darken([original-color], $modifierDarkenActive). Also, when button is active, we scale it's size down, with the css function transform: scale($modifierScaleButtonActive)

The design token name for darkening value is not tight to buttons as we use the same token for hover state of different components (like <TextLink /> or in the future for <Chip />, etc.)

There is one exception though. For button style “Link”, we want to use $backgroundButtonLinkHover instead of darkening pure white. The reason for this is that if we would use darken(#fff, 5%), it would generate gray-ish color. But in our color system, we use blue-ish versions of our gray shades. For active state of this button, we just use darken with this vaues: darken($backgroundButtonLinkHover, $modifierDarkenButtonLink).

Hover & active states are same for all button sizes and button styles. (With exception of Link type, as mentioned above)

Disabled state should use opacity $opacityButtonDisabled, hover styles should be disabled too so it doesn’t look like there is some interaction behind it.

Focus state should use default browser styling (outline). It’s possible that we'll change it in the future with our own defined box-shadow, but we need to discuss this with designers.

Some inspiration from other’s React components for button component:

https://mineral-ui.com/components/button
http://design-system.pluralsight.com/components/button/
https://seek-oss.github.io/seek-style-guide/button
https://seek-oss.github.io/seek-style-guide/button (there is nice loading animation :-)
https://polaris.shopify.com/components/actions/button#navigation (they have also some accessibility parameters)
http://design.acl.com/component/Button (I like their naming convention for states, eg. isDisabled or isLoading)

General inline feedback line

As raised in this discussion, having a feedback component for form fields would avoid code duplication. This would be useful for components such as Input, Select, Checkbox, etc.
We should decide on a name and path for the component. Bootstrap uses form-control-feedback classes for these.
Suggestions:

• 1️⃣ src/Feedback/FieldFeedback.js
• 2️⃣ src/Hints/FieldHint.js

Any other ideas?

Set up depreciation warning for BLKN

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

BLKN-ui is being deprecated for Kiwi-UI. See #56

Add prop value to Checkbox component

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

Remove stories.js.flow files from package

It seems *.stories.js.flow files were added to the package, which is not desired.

This requires a change to flow-copy-source's --ignore/-i pattern.

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

Buttons

https://app.zeplin.io/project/5a85990b663b8b462f03ca55

Props:

• sizes (large | normal | small)

• type (secondary | primary )

• Icon (withIcon | without Icon)

• disabled | enabled

Restructure folder structure for only one project

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

Due to the move to a single Kiwicom-ui module the extra folders are redundant and only cause visual clutter.

The project will use only Styled-JSX for the start.

Proposition:

• Move Icons into separate repo

Add value to Radio component

Radio component should contain value prop to faciliate it usage in forms

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

Create Radio Button

Create Radio Button for ORBIT-UI

For BLKN we need to create Radio Button component ASAP.

link to design  Edit Refund

Update all Components to comply with new Contribution guide

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

See #55

Set up Styled JSX & Storybook

Unit test Checkbox

Test that:

• It renders without crashing
• It calls the callback when clicked the input
• It calls the callback when clicked the label

---

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

Header with icon

This:

https://zpl.io/agGnq0Q

---

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

Update Contributing guideline

Make sure these boxes are ticked before submitting a new issue:

• I have checked that this is not a duplicate
• I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

Use .stories instead of /stories

Minor folder structure fix in order to keep components and all their files together.

Create <CarrierLogo /> component

Description

The main purpose of carrier logo component is to display a logo for airlines, train services, etc.

Visual style

Parameters

Parameter	Values	Default
Size	Small, Medium, Large	Medium
Carriers	?	?

It's possible, that we don't have logos for some carriers. In these cases, use default images instead. Default image is different for each type of carrier (flight, train, bus).
Default images:

Visual design & design tokens

For all configurations

border-radius: $borderRadiusNormal
background-color: $backgroundCarrierLogo

Additional information

• It's possible to have from 1 to 4 carriers in that container. This should be possible only for Large size. Size of the icons inside is 16x16px, with exception of 3-4 carriers (in this case, it's 15x15 as we want 2px spacing between logos).
• We upload the logo of a carrier in 128x128px size and with png extension. All logos are then generated in 4 different sizes (16x16, 32x32, 64x64, 128x128). For medium size icons please use 32x32 version as the original one.
• The component needs to be prepared for retina displays.
• Carrier name should be used for alt and title of the image; even in cases when we use the default image for their logo.

Based on the selected configuration

Parameter:Value	property: $token
Size:Small	height: $heightIconSmall width: $widthIconSmall
Size:Medium	height: $heightIconMedium width: $widthIconMedium
Size:Large	height: $heightIconLarge width: $widthIconLarge

Our original component for carrier logo from MMB

Check Storybook