adityabhaskar / source-apps

Source library for Guardian apps

Design system library for Guardian apps

---

Android Usage

Add the library dependency

Add the dependency to build.gradle.kts for the consuming module:

implementation("com.gu.source:source-android:<version>")

Note

See here if you need to build and bundle the library as a local repository.

Using the library

The library exposes a single object com.gu.Source. Design presets are available as properties on this object, e.g. Source.Typography.HeadlineBold15.

The library bundles app font files, so they are not separately required in consumer apps.

Typography presets

Typography presets include fontFamily, fontSize, lineHeight, fontWeight, fontStyle in a single token.

Use typography presets directly in a Text component.

Text(
    text = "The world's leading liberal voice",
    style = Source.Typography.TextEgyptianItalic14,
)

Core palette colours

Core palette colours are available for direct use in components through Source.Palette.

Text(
    text = "The world's leading liberal voice",
    color = Source.Palette.Brand400,
)

Buttons

Two button components are available - SourceButton and SourceIconButton.

The buttons are have preset style and size variants corresponding to Source presets. Both Core and Reader Revenue themes are also provided.

Using SourceButton:

SourceButton(
    text = "Sign in",
    priority = SourceButton.Priority.PrimaryOnWhite,
    onClick = {},
    size = SourceButton.Size.Small,
)

Using SourceIconButton with a Material Icon:

SourceIconButton(
    icon = Icons.Default.Person,
    priority = SourceButton.Priority.SecondaryOnBlue,
    contentDescription = null,
    onClick = {},
    size = SourceButton.Size.Medium,
)

Using SourceIconButton with a drawable resource:

SourceIconButton(
    painter = painterResource(R.drawable.ic_person),
    priority = SourceButton.Priority.SecondaryOnBlue,
    contentDescription = null,
    onClick = {},
)

---

iOS Usage

Adding the Swift Package To Xcode

To add the Source Swift Package to your project, follow these steps:

1. Open your project in Xcode.

2. Go to File > Swift Packages > Add Package Dependency....

3. In the search bar, enter the URL https://github.com/guardian/source-apps.git click Next.

4. Select the version rule that suits your needs, then click Next.

5. Choose the Source library and click Finish.

Now, the Source Swift Package should be added to your project and you can import it wherever you need it.

Using in Another Swift Package

If you're developing a Swift Package and want to use Source, you can add it as a dependency in your Package.swift file.

Here's how you can do it:

1. Open your Package.swift file.

2. Add Source to the dependencies array:

dependencies: [
    .package(url: "https://github.com/guardian/source-apps.git", branch: "main")
]

3. Add Source as a dependency for your target:

targets: [
    .target(
            name: "YourPackageName",
            dependencies: [
                .product(name: "Source", package: "source-apps")
            ]),
]

4. Now, you can import Source in any Swift file in your package.

Typography

If you are using in this package that doesn't already use the GuardianFonts package you will need to ensure you have registered the custom fonts. You can skip this step if your project already includes the GuardianFonts package.

Registration

If you are using in this package that doesn't already use the GuardianFonts package you will need to ensure you Custom fonts are registered differently in Swift Packages due to the lack of an info.plist. You should use GuardianFonts.registerFonts() function to register the fonts contained in this swift package to use in your application.

If using this from within another module, you can do the registration within the module's init() function.

Otherwise, from within a project this can be done within the App Delegate application(_:willFinishLaunchingWithOptions:) function.

Usage

The Typography fonts provided by this library are of type GuardianFont. GuardianFont is a type provided by the GuardianFonts app which encapsulates all required font properties, eg. style, size & lineHeight.

1. Import framework - import Source

2. Use font modifier from GuardianFonts package - .font(Typography.headlineBld14)

ColorPalette

This defines the brand colours from Source documentation.

Usage

1. Import framework - import Source
2. Access colours like so - ColorPalette.brand400