Alignment

Alignment higher-order-components (HOCs) allow components to be aligned vertically within a given space.

Icon alignment within text with textStyle "Body Default"

Aligning an icon within text with textStyle "Body Default" can be done using withAlignment, providing suitable spacings.

Storybook failed to load.

Using the HOC is done as follows:


                                                        
                                                        
                                                            import LongArrowRightIconSm from 'bpk-component-icon/sm/long-arrow-right';
                                                        import { withAlignment } from 'bpk-component-icon';
                                                        import { lineHeightBase, iconSizeSm, textColors } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
                                                        import BpkText, { TEXT_STYLES } from 'bpk-component-text';
                                                        
                                                        const AlignedArrow = withAlignment(
                                                          LongArrowRightIcon, lineHeightBase, iconSizeSm
                                                        );
                                                        
                                                        <BpkText textStyle={TEXT_STYLES.bodyDefault}>
                                                          Search
                                                          &nbsp;
                                                          <AlignedArrow fill={textColors.textPrimaryDay}/>
                                                        </BpkText>

Icon alignment within text with textStyle "Body Longform"

Storybook failed to load.

Alignment can be achieved as follows:


                                                        
                                                        
                                                            import LongArrowRightIcon from 'bpk-component-icon/lg/long-arrow-right';
                                                        import { withAlignment } from 'bpk-component-icon';
                                                        import { lineHeightLg, iconSizeLg, textColors } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
                                                        import BpkText, { TEXT_STYLES } from 'bpk-component-text';
                                                        
                                                        const AlignedArrow = withAlignment(
                                                          LongArrowRightIcon, lineHeightLg, iconSizeLg
                                                        );
                                                        
                                                        <BpkText textStyle={TEXT_STYLES.bodyLongform}>
                                                          Search
                                                          &nbsp;
                                                          <AlignedArrow fill={textColors.textPrimaryDay}/>
                                                        </BpkText>

Text with textStyle "Body Default" alignment with an icon

Storybook failed to load.

If wishing to use an icon taller than the text, alignment must be performed on the text as follows:


                                                        
                                                        
                                                            import SearchIcon from 'bpk-component-icon/lg/search';
                                                        import { withAlignment } from 'bpk-component-icon';
                                                        import { iconSizeLg, lineHeightBase, textColors } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
                                                        import BpkText, { TEXT_STYLES } from 'bpk-component-text';
                                                        
                                                        const AlignedSpan = withAlignment(
                                                          'span', iconSizeLg, lineHeightBase
                                                        );
                                                        
                                                        <BpkText textStyle={TEXT_STYLES.bodyDefault}>
                                                          <SearchIcon fill={textColors.textPrimaryDay} />
                                                          <AlignedSpan>
                                                            &nbsp;
                                                            Search
                                                          </AlignedSpan>
                                                        </BpkText>

Text with textStyle "footnote" alignment with an icon

Storybook failed to load.

Similarly, to use a small text, line height and the BpkText wrapper need to use the small size:


                                                        
                                                        
                                                            import SearchIcon from 'bpk-component-icon/lg/search';
                                                        import { withAlignment } from 'bpk-component-icon';
                                                        import { iconSizeLg, lineHeightSm, textColors } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
                                                        import BpkText, { TEXT_STYLES } from 'bpk-component-text';
                                                        
                                                        const AlignedSpanSmall = withAlignment(
                                                          'span', iconSizeLg, lineHeightSm
                                                        );
                                                        
                                                        <BpkText textStyle={TEXT_STYLES.footnote} >
                                                          <SearchIcon fill={textColors.textPrimaryDay} />
                                                          <AlignedSpanSmall>
                                                            &nbsp;
                                                            Search
                                                          </AlignedSpanSmall>
                                                        </BpkText>

Icon alignment within a button

Storybook failed to load.

HOC wrappers exist for common alignment tasks, such as aligning an icon within a button. Other examples can be seen in the buttons page.


                                                        
                                                        
                                                            import LongArrowRightIconSm from 'bpk-component-icon/sm/long-arrow-right';
                                                        import { withButtonAlignment } from 'bpk-component-icon';
                                                        import { textColors } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
                                                        
                                                        const AlignedArrow = withButtonAlignment(LongArrowRightIconSm);
                                                        
                                                        <BpkButton >
                                                          Button Text
                                                          &nbsp;
                                                          <AlignedArrow fill={textColors.textPrimaryInverseDay} />
                                                        </BpkButton>

Icon alignment within a large button

Storybook failed to load.

Similarly, a HOC exists for aligning icons to a large button. Other examples can be seen in the buttons page.


                                                        
                                                        
                                                            import LongArrowRightIcon from 'bpk-component-icon/lg/long-arrow-right';
                                                        import { withLargeButtonAlignment } from 'bpk-component-icon';
                                                        
                                                        const AlignedArrow = withLargeButtonAlignment(LongArrowRightIcon);
                                                        
                                                        <BpkButton large >
                                                          Button Text
                                                          &nbsp;
                                                          <AlignedArrow fill={textColors.textPrimaryInverseDay} />
                                                        </BpkButton>

Installation

The alignment HOCs are provided in the bpk-component-icon package. See Icons for installation instructions.