closes #103

This Pull Request meets the following criteria:

• [x] Tests have been added/adjusted for my new feature
• [x] New Components are registered in index.js of my project

Accept nullable string as code prop. Fallback to "anywhere" on unknown country code.

This Pull Request meets the following criteria:

• [x] Tests have been added/adjusted for my new feature
  
  
  LiveURL: https://orbit-components-relaxed-country-flag.surge.sh

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

• [x] I have checked that this is not a duplicate
• [x] 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

These were originally created by @kravco in an internal project at Kiwi.com, and they have not been updated in a few months, so there might be some discrepancies.

TODO

• [x] Check that each type matches up against the Flow types;
• [x] Alter the build process to include these files in the shipped NPM package

ALTERNATIVE

• submit these types on DefinitelyTyped and manage it there

Components done:

• [x] AirportIllustration
• [x] Alert
• [x] Badge
• [x] Breadcrumbs
• [x] Button
• [x] ButtonGroup
• [x] ButtonLink
• [x] CallOutBanner
• [x] Card
• [x] CarrierLogo
• [x] Checkbox
• [x] ChoiceGroup
• [x] ClickOutside
• [x] Collapse
• [x] CountryFlag
• [x] Coupon
• [x] Desktop
• [x] Dialog
• [x] Dictionary
• [x] Drawer
• [x] FeatureIcon
• [x] FormFeedback
• [x] FormLabel
• [x] Heading
• [x] Hide
• [x] Icon
• [x] icons
• [x] Illustration
• [x] InputField
• [x] InputFile
• [x] InputGroup
• [x] InputStepper
• [x] Layout
• [x] LazyImage
• [x] LinkList
• [x] List
• [x] ListChoice
• [x] Loading
• [x] Mobile
• [x] Modal
• [x] ModalFooter
• [x] ModalHeader
• [x] ModalSection
• [x] NavigationBar
• [x] NotificationBadge
• [x] Pagination
• [x] PictureCard
• [x] Popover
• [x] Portal
• [x] PricingTable
• [x] BadgePrimitive
• [x] IllustrationPrimitive
• [x] Radio
• [x] RatingStars
• [x] Seat
• [x] Select
• [x] Separator
• [x] ServiceLogo
• [x] SkipLink
• [x] SkipNavigation
• [x] Slider
• [x] Stack
• [x] Stepper
• [x] StepperStateless
• [x] Sticky
• [x] StopoverArrow
• [x] Table
• [x] Tag
• [x] Text
• [x] Textarea
• [x] TextLink
• [x] ThemeProvider
• [x] Tile
• [x] TileGroup
• [x] Tooltip
• [x] Translate
• [x] Truncate
• [x] boundingClientRect
• [x] cloneWithTooltip
• [x] Grid
• [x] handleKeyDown
• [x] mediaQuery
• [x] randomID
• [x] rtl
• [x] scroll
• [x] Slide
• [x] toggleDown
• [x] toggleUp
• [x] transition
• [x] validateDecrement
• [x] validateIncrement

Template for icons:

• [x] FeatureIcon
• [x] Icon

Closes #324


LiveURL: https://orbit-components-rcsl-add-ts-definitions.surge.sh

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 $backgroundButtonLinkHoverinstead 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)

It is impossible to use this library with Typescript. It would be nice if it generated types for typescript as well, or better yet was rewritten for Typescript :D

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

The idea to have text separate from Figma images seems like potentially a nice one, but the iframe for the badge content structure requires me to be logged in to view.

Is your feature request related to a problem? Please describe.

useMediaQuery hook breaks SSR on nextjs, producing mismatch errors and unexpected rendering

Describe the solution you'd like i'm very beginner in react but with some search i found this answer here Originally posted by @lfades in https://github.com/vercel/next.js/discussions/17443#discussioncomment-87097

so i used react useEffect as a wrapper to update a local state value on useMediaQuery changes. so i can achieve the navigationbar example turns into drawer on mobile

const [queryLargeMobile, setqueryLargeMobile] = useState(true);
	const { isLargeMobile } = useMediaQuery();

	useEffect(() => {
		setqueryLargeMobile(isLargeMobile);
		return () => {};
	}, [isLargeMobile]);

Describe alternatives you've considered i'm not sure if my solution is good but would be nice if useMediaQuery support SSR.

I've added a new hook, which might be useful for further development or for anybody who uses orbit. Usage of Observer has some advantages over standard approaches with event listeners.


LiveURL: https://orbit-mainframe-useIntersect.surge.sh

Modal component is one of the last that uses React Class component. This complicates other improvements we want to make to the Modal component, as general API refactor, animations etc. and therefore the best would be to refactor it to use only the React hooks.

Expected Behavior

Because Select components have a round border, the background of its corners should be transparent/show the color of the parent component

https://orbit.kiwi/components/input/select/

Current Behavior

Select components have the default background color in their colors, which clashes next to other custom colors:

Possible Solution

Seems like it will require fix within orbit as I don't they can be overridden w/ simple css due to: https://orbit.kiwi/development/guides/no-exporting-components/

Steps to Reproduce

See Select component within a div with a black background here: https://codesandbox.io/s/interesting-mclean-qyo87j?file=/src/index.js

Context (Environment)

Problem I'm facing is having to worry about matching all of the Orbit default colors next to each of my custom components. In many cases, the colors will just match but would rather not have to do that explicitly vs being able to rely on transparency.

Bumps express from 4.17.1 to 4.18.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps cypress-io/github-action from 4 to 5.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps @icons-pack/react-simple-icons from 4.2.0 to 6.2.0.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.