Alignment

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.

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"

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

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

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

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

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.